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本 书 适合 作为 高 等 院 校 计算 机 科学 与 技术 、 软 件 工程 网络 工 程 、 信 息 管理 与 信息 系统 专业 本 科 生 
的 教材 , 亦 可 作为 社会 培训 机 构 的 实 训 教 材 , 还 可 作为 网 页 开发 工程 技术 人 员 的 参考 书 。 
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ol) 


HTML5 新 一 代 网 页 开发 标准 一 经 推出 ,以 其 跨 平 台 、 整 合 桌面 
Web 应 用 和 移动 Web 应 用 等 优点 受到 广大 厂商 的 青睐 。 当 前 主流 
Web 浏览 器 ,尤其 是 移动 端 Web 浏览 器 都 支持 HTML5 标准 。 
HTML5 成 为 近年 来 最 流行 的 Web 应 用 前 端 开 发 工具 ,成 为 企业 快 
速 部 署 、 到 处 运行 Web 应 用 的 不 二 选择 。 运 用 HTML5 进行 Web 
应 用 前 端 开发 ,是 最 近 几 年 需求 广泛 的 职业 岗位 。HTML5 网 页 开 
发 不 但 已 作为 很 多 高 校 信息 类 学 科 专 业 的 必修 课 或 选修 课 , 也 是 社 
会 IT 类 课程 培训 机 构 的 热门 课程 之 一 。 

本 书 按照 由 简单 到 复杂 、 由 静态 到 动态 .由 单一 到 综合 .由 理论 
到 实验 、 由 低 版 本 到 高 版 本 、 由 验证 到 设计 、 由 PC Web 到 移动 Web 
的 技术 演进 、 需 求 演进 原则 布局 谋 篇 ,以 整合 理论 与 实验 ,讲述 网 页 
制作 与 设计 知识 ,突出 跟踪 、 调 试 与 部 署 方面 的 实践 技能 。 

本 书 以 IT 企业 对 Web 前 端 开发 人 员 的 知识 要 求 、 能 力 要 求 和 
素质 要 求 为 基础 ,以 实践 能 力 培养 为 宗旨 ,将 知识 目标 ,能力 目 标 和 
素质 目标 自然 明确 地 融入 各 章 。 各 章 按 照 由 浅 入 深 、 由 简 到 繁 、 由 
易 到 难 的 原则 从 前 到 后 安排 内 容 。 各 章 内 部 按照 理论 基础 知识 、 上 
机 实验 样 例 和 实验 任务 脉络 展开 。 本 书 设计 一 个 画图 Web 应 用 程 
序 , 将 其 功能 体系 分 解 到 各 章 中 ,作为 实验 任务 的 部 署 。 

全 书 共 分 10 章 , 依 次 为 HTML 基础 、 表 单 与 CSS、HTML 布 
局 、JavaScript、HTML DOM、jQuery、JSON、HTML5 、jQuery 
Mobile .Node.js。 本 书 涉及 浏览 器 端 脚 本 程序 调试 .跟踪 、 异 常 处理 
技术 IIS Web 服务 器 发 布 技术 、 无 线 局 域 网 配置 技术 、Windows 防 
火 墙 配置 技术 、Node.js 的 Windows 环境 安装 技术 。 本 书 所 用 的 开 
发 工具 为 Microsoft Visual Studio 2010, 但 不 限于 Microsoft Visual 
Studio 2010。. htm( 或 . html) 格 式 文件 占 源 程 序 文件 95% 以 上 。 对 
于 . htm( 或 . html) 格 式 文件 ,Microsoft Visual Studio 2010 仅 起 编辑 
器 的 作用 。 涉 及 . aspx 格式 文件 的 地 方 需 要 Microsoft Visual 
Studio 2010/2012/2013 开发 环境 支持 。 
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选用 本 书 作为 教材 ,至 少 需要 72 学 时 ,理论 和 实验 各 36 学 时 。 

本 书 具 有 以 下 特点 : 

(1) 理论 与 实践 融 为 一 体 。 各 章 均 按 照 先 理 论 基 础 作 铺垫 ,然后 讲解 上 机 实验 样 例 ， 
最 后 部 署 实验 任务 的 顺序 进行 。 

(2) 对 象 与 脚本 有 机 统一 。 本 书 从 第 7 章 JSON 开始 直到 第 9 章 结束 ,进入 用 面向 
对 象 开发 方法 进行 脚本 程序 开发 的 环节 ,实验 任务 对 面向 对 象 技术 应 用 有 明确 要 求 。 

(3) 能 力 与 素质 孕 于 知识 。 本 书 各 章 都 有 明确 的 知识 目标 .能 力 目标 和 素质 目标 ,以 
本 教材 为 支撑 点 ,落实 专业 人 才 培 养 目 标 。 

(4) 上 机 与 实践 指导 完备 。 先 进行 上 机 实验 样 例 讲解 ,而 后 进行 实验 任务 的 部 署 。 
上 机 实验 流程 明确 清晰 ,包括 实验 目的 程序 功能 、 源 程序 .代码 分 析 、 和 运行 演示 。 实 验 任 
务 部 署 具体 ,操作 性 强 , 包 括 目的 、 功 能 性质、 要 求 \ 原理. 问题 及 解决 方案 .运行 结果 、 程 
序 分 析 。 

(5) 教学 配套 资源 完备 。 提 供 PPT 课件 、 源 程序 .教学 大 纲 、 授 课 计 划 、 试 题 . 课 程 
剖析 。 

(6) PC Web 和 移动 Web 应 用 集 于 一 身 。 

本 书 由 李 洪 波 、 杨 延 村 、 崔 光 海 、 杨 坤 、 赵 峰 共 同 编写 。 全 书 主要 由 李 洪 波 执笔 、 编 程 
和 统 稿 , 杨 延 村 和 上 举 光 海 分 别 制作 了 第 1 章 和 第 2 章 的 插图 , 杨 坤 和 赵峰 完成 了 Web 
Socket 部 分 内 容 。 本 书 在 编写 过 程 中 得 到 了 清华 大 学 出 版 社 的 大 力 支持 ,在 此 表示 诚 健 
的 感谢 。 

由 于 作者 水 平 有 限 , 书 中 难免 有 疏 漏 之 处 , 尽 请 读者 不 将 赐教 。 

联系 邮箱 为 738441242@qq. com。 
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图 知识 目标 

。 了 解 Internet 

。 了解 HTML 语言 的 特点 
。 掌握 HTML 的 文档 结构 
。 掌握 HTML 常用 标签 


图 能 力 目标 

。 能 够 利用 浏览 器 浏览 网 页 ,查看 文档 结构 ,调试 网 页 效果 

。 能 够 利用 Visual Studio 2010 创建 网 站 ,新 增 HTML 文件 和 编辑 HTML 文档 
。 能 够 利用 超 链 接 进 行 任意 跳 转 


国 素质 目标 

。 将 网 页 的 基本 结构 归结 于 树 

。 将 查看 器 看 到 的 元 素 抽象 为 对 象 
图 教学 重点 

。 HTML 文档 结构 

。 3 种 形式 的 超 链接 

。 表格 的 设置 

图 建议 学 时 

。 理论 : 3 学 时 

。 实验 : 3 学 时 


11 Interet 要 还 


Internet, 译 为 因特网 ,又 叫做 国际 互联 网 ,是 由 使 用 公用 语言 互相 通信 的 计算 机 连 
接 而 成 的 全 球 网 络 。 一 旦 用 户 计算 机 连接 到 它 的 任何 一 个 节点 上 ,意味 着 该 计算 机 已 经 
连 入 Internet 网 上 了 。 目 前 ,Internet 的 用 户 已 经 遍及 全 球 , 有 数 十 亿 人 在 使 用 Internet， 


并 且 月 





日 户 数 还 在 以 等 比 级 数 上 升 。 
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1. 网 络 应 用 


(1) 收发 电子 邮件 

这 是 最 早 也 是 最 广泛 的 网 络 应 用 。 由 于 其 具有 费用 低廉 和 快捷 方便 的 特点 ,仿佛 缩 
短 了 人 与 人 之 间 的 距离 ,不 论 身 在 异国 他 乡 与 朋友 进行 信息 交流 ,还 是 联络 工作 ,都 如 同 
对 面 聊天 一 样 容易 。 

(2) 网 络 办 公 

网 络 的 广泛 应 用 会 创造 一 种 数字 化 的 生活 与 工作 方式 ,叫做 小 型 家 庭 办 公 室 。 家 庭 
将 不 再 仅仅 是 人 类 社会 生活 的 一 个 孤立 单位 ,而 是 信息 社会 中 充满 活力 的 细胞 。 

(3) 上 网 浏览 或 冲浪 

这 是 网 络 提供 的 最 基本 的 服务 项 目 。 用 户 可 以 访问 网 上 的 任何 网 站 ,根据 兴趣 进行 
网 上 畅游 , 足 不 出 户 便 可 尽 知 天 下 事 。 

(4) 查询 信息 

网 络 是 这 个 世界 最 大 的 资料 库 , 利 用 一 些 供 查 询 信息 的 搜索 引擎 ,可 以 从 浩如烟海 
的 信息 库 中 找到 用 户 需 要 的 信息 。 随 着 我 国 “政府 上 网 ”工程 的 发 展 , 人 们 的 一 些 日 常事 
务 几乎 都 可 以 在 网 络 上 完成 。 

(5) 电子 商务 

消费 者 借助 网 络 , 进 入 购物 站 点 进行 消费 。 网 络 上 的 购物 站 点 建立 在 虚拟 的 数字 化 
空间 里 ,借助 Web 来 展示 商品 ,并 利用 多 媒体 特性 加 强 商品 的 可 视 性 .选择 性 。 虽 然 目 
前 的 网 络 购物 还 不 完善 ,但 它 已 经 实 实 在 在 地 来 到 我 们 身边 ,使 我 们 的 生活 多 了 一 种 
选择 。 

(6) 丰富 人 们 的 闲暇 生活 方式 

闲暇 活动 即 非 职业 劳动 的 活动 , 它 包 括 消 遣 娱乐 型 活动 ,如 欣赏 音乐 .看 电影 .电视 、 
跳舞 ,参加 体育 活动 ;发 展 型 活动 ,包括 学 习 文 化 知识 ,参加 社会 活动 .从事 艺 术 创造 和 科 
学 发 明 活 动 等 。 但 与 网 络 有 直接 关系 的 闲暇 生活 一 般 包 括 闲 暇 教育 .闲暇 娱乐 和 闲暇 
交往 。 

(7) 网 上 交友 聊天 

随 着 网 络 聊 天 工具 越 来 越 普 遍地 应 用 于 人 们 的 生活 之 中 ,每 个 人 都 可 以 通过 上 网 结 
交 世 界 各 地 的 网 上 朋友 ,相互 交流 思想 ,做 到 “海内 存 知己 ,天涯 车 比邻 ”。 

(8) 其 他 应 用 

在 现实 世界 中 ,人 类 活动 的 网 络 版 俯 拾 即 是 ,如 网 上 点 播 、 网 上 炒股 、 网 上 求职 ,艺术 
展览 等 。 

总 之 ,Internet 是 大 众 创业 万 众 创新 的 引擎 ,为 各 行 各 业 的 发 展 提供 动力 ,把 人 类 社 
会 带 入 一 个 全 新 的 数字 历史 阶段 。Internet 已 演变 为 信息 经 济 的 原动力 和 新 引擎 ,演变 
为 一 个 降低 成 本 、 提 高 生产 力 ,并 为 各 种 新 工作 铺 平 道路 的 推土机 。 

未 来 高 速 网 络 连 接 及 Internet 连接 将 无 处 不 在 。 家 里 .办公室 里 将 有 难以 置信 的 网 
络 连接 速度 ,高 速 的 网 络 连 接 将 遍及 各 种 环境 。 网络 将 完全 制约 人 们 的 工作 、 生 活 及 
娱乐 。 
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随 着 Internet 在 全 球 的 普及 和 其 在 各 个 领域 的 广泛 应 用 ,工业 时 代 那 种 以 地 缘 为 本 
的 场地 分 割 和 垄断 方式 的 国家 和 企业 集团 的 模式 会 逐步 被 打破 。 我们 面 对 的 是 一 个 统 
一 的 全 球 市 场 ,经 济 将 实现 全 球 化 。 目 前 最 突出 的 是 网 络 环境 下 的 经 济 模式 一 一 电子 
商务 。 


2. 网 络 功能 





Internet 上 有 丰富 的 信息 资源 ,可 以 通过 Internet 方便 地 寻求 各 种 信息 。 可 从 两 个 
来 源 寻 求 信息 : 人 和 计算 机 系统 。 在 Internet 上 可 以 找到 能 够 提供 各 种 信息 的 人 : 教育 
家 科学家、 工程 技术 专家 、 医 生 ` 营 养 学 家 .学生 …… 以 及 有 各 种 专长 和 爱好 的 人 们 。 对 
于 所 有 这 些 人 ,Internet 提供 与 处 在 同样 情况 下 的 其 他 人 进行 讨论 和 交流 的 渠道 。 实 际 
上 ,几乎 在 所 有 可 能 想到 的 题目 下 都 能 找到 讨论 与 交流 的 小 组 。 或 者 ,如 果 没 有 这 样 的 
讨论 小 组 ,我 们 还 可 以 自己 创建 一 个 。 

Internet 计算 机 存储 的 信息 汇 成 了 信息 资源 的 大 海洋 。 信 息 内 容 无 所 不 包 : 有 学 科 
技术 的 各 种 专业 信息 ,也 有 与 大 众 日 常 工作 与 生活 息息相关 的 信息 ;有 严肃 主题 的 信息 ， 
也 有 体育 、 娱 乐 . 旅 游 .消遣 和 奇闻 逸事 一 类 的 信息 ;有 历史 档案 信息 ,也 有 现实 世界 的 信 
息 ; 有 知识 性 和 教育 性 的 信息 ,也 有 消息 和 新 闻 的 传媒 信息 ;有 学 术 教育 .产业 和 文化 方 
面 的 信息 ,也 有 经 济 .金融 和 商业 信息 等 。 信 息 的 载体 涉及 几乎 所 有 媒体 ,如 文档 .表格 、 
图 形 .影像 .声音 以 及 它们 的 合成 信息 。 信 息 容 量 小 到 几 行 字符 ,大 到 一 个 图 书馆 。 信 息 
分 布 在 世界 各 地 的 计算 机 上 ,以 各 种 可 能 的 形式 存在 ,如 文件 数据 库 、 公 告 牌 、 目 录 文 档 
和 超 文 本 文档 等 ,而 且 这 些 信息 还 在 不 断 地 更 新 和 变化 中 。 可 以 说 ,这 里 是 一 个 取 之 不 
尽 .用 之 不 竭 的 大 宝库 。 

Internet 的 另 一 种 资源 是 计算 机 系统 资源 ,包括 连接 在 Internet 各 种 网 络 上 的 计算 
机 的 处 理 能 力 ,存储 空间 以 及 软件 工具 和 软件 环境 。 一 般 地 说 ,要 求 使 用 计算 机 系统 的 
Internet 用 户 ,如 科学 家 、 工 程 师 . 设 计 师 .教师 ,学 生 或 每 一 个 普通 用 户 , 都 可 以 远程 登录 
某 台 目标 计算 机 一 一 只 要 这 台 计 算 机 允许 用 户 使 用 并 建立 了 用 户 的 登录 账号 。 用 户 可 
以 像 使 用 自己 的 计算 机 一 样 使 用 它们 。 

进入 Internet 后 ,就 可 以 利用 各 个 网 络 和 计算 机 上 无 穷 无 尽 的 资源 , 同 世 界 各 地 自 
由 通信 和 交换 信息 ,以 及 去 做 通过 计算 机 能 做 的 各 种 各 样 的 事情 ,享受 Internet 提供 的 
各 种 服务 。 

(1) 高 级 浏览 WWW 服务 

WWW(World Wide Web) ,简称 Web, 是 用 户 登 录 Internet 后 最 常 利 用 的 功能 。 人 
们 连 入 Internet 后 ,有 一 半 以 上 的 时 间 都 是 在 与 各 种 各 样 的 Web 页 面 打 交道 。 在 基于 
Web 的 方式 下 ,人 们 可 以 浏览 .搜索 ,查询 各 种 信息 ,发布 自己 的 信息 ,与 他 人 进行 实时 或 
者 非 实 时 的 交流 ,可 以 游戏 ,娱乐 .购物 等 。 

(2) 电子 邮件 E-mail 服务 

在 Internet 上 ,电子 邮件 或 称 为 E-mail 系统 是 使 用 最 多 的 网 络 通信 工具 ,E-mail 已 
成 为 备 受 欢迎 的 通信 方式 。 用 户 可 以 通过 E-mail 系统 同 世界 上 任何 地 方 的 朋友 交换 电 
子 邮 件 。 不 论 对 方 在 哪里 ,只 要 也 连 入 Internet, 他 发 送 的 信和 只 需要 几 分 钟 就 可 以 到 达 对 
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方 的 手中 了 。 

(3) 远程 登录 Telnet 服务 

远程 登录 就 是 通过 Internet 进入 和 使 用 远 距 离 的 计算 机 系统 ,就 像 使 用 本 地 计算 机 
一 样 。 远 端的 计算 机 可 以 在 同一 间 屋 子 里 ,也 可 以 远 在 数 千 公 里 之 外 。 它 使 用 的 工具 是 
Telnet。 它 在 接 到 远程 登录 的 请 求 后 ,就 试图 把 用 户 所 在 的 计算 机 同 远 端 计算 机 连接 起 
来 。 一 旦 连通 ,用 户 的 计算 机 就 成 为 远 端 计算 机 的 终端 。 用户 可 以 正式 注册 进入 系统 成 
为 合法 用 户 ,执行 操作 命令 ,提交 作业 ,使 用 系统 资源 。 完 成 操作 任务 后 ,通过 注销 退出 
远 端 计算 机 系统 ,同时 也 退出 Telnet。 

(4) 文件 传输 FTP 服务 

FTP( 文 件 传输 协议 ) 是 Internet 上 最 早 使 用 的 文件 传输 程序 。 它 同 Telnet 一 样 ,使 
用 户 能 登录 到 Internet 的 一 台 远程 计算 机 ,把 其 中 的 文件 传送 回 自己 的 计算 机 系统 ,或 
者 把 本 地 计算 机 上 的 文件 传送 并 装载 到 远方 的 计算 机 系统 。 利 用 这 个 协议 ,就 可 以 下 载 
免费 软件 ,或 者 上 传 自己 的 主页 了 。 


3. Internet 的 特点 


Q@ 系统 不 与 具体 的 专用 网 络 相 关联 ,用 户 可 以 在 世界 范围 内 的 任何 地 点 、 任 何 时 候 
方便 地 访问 网 络 上 面 任何 一 个 节点 。 

@ 对 用 户 的 计算 机 和 网 络 操作 的 要 求 很 低 。 

@ 绝 大 部 分 报 文 是 通过 填写 屏幕 单 证 的 方式 形成 的 。 

@ Internet 的 带宽 高 。 

@ Internet 的 费用 低 。 
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浏览 WWW 服务 ,前提 是 用 户 的 计算 机 已 接 入 Internet, 而 且 计 算 机 上 已 安装 浏览 
器 。 作 为 Windows 操作 系统 的 一 部 分 ,IE 浏览 器 随 着 操作 系统 一 起 安装 到 用 户 机 器 中 。 
Firefox、Chrome、Opera 等 个 人 计算 机 上 的 浏览 器 需要 单独 安装 。 安 卓 版 的 手机 、 浏 览 器 
也 随 着 操作 系统 的 安装 而 完成 ,无 须 单独 安装 。 在 浏览 器 输入 域名 或 网 址 (一 个 全 球 唯 
一 的 URL) ,把 远方 站 点 的 HTML 文档 借助 HTTP 传输 到 本 地 进行 浏览 。HTML 网 页 
是 Web 应 用 的 前 端 ,直接 与 用 户 接触 。 


121 基础 知识 


超 文本 标记 语言 或 超 文 本 链接 标示 语言 (Hyper Text Markup Language, HTML)， 
是 目前 网 络 上 应 用 最 为 广泛 的 语言 ,也 是 构成 网 页 文档 的 主要 语言 。HTML 独立 于 各 
种 操作 系统 平台 (UNIX、Windows 等 )。 自 1990 年 以 来 ,HTML 就 一 直 被 作为 World 
Wide Web 的 信息 表示 语言 ,用 于 描述 Homepage 的 格式 设计 和 与 WWW 上 其 他 
Homepage 的 联结 信息 。 使 用 HTML 语言 描述 的 文件 ,需要 通过 WWW 浏览 器 显示 出 
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效果 。 常 用 的 WWW 浏览 器 有 Chrome( 谷 歌 )、Firefox( 火 狐 )、IE8 及 以 上 版 本 、Edge、 
Opera、Safari.QQ、360 等 。 

HTML 文本 是 由 HTML 命令 组 成 的 描述 性 文本 , HTML 命令 可 以 说 明文 字 、 图 
形 ,动画 声音、 表格、 链接 等 。HTML 的 结构 包括 头 部 (head) .主体 (body) 两 大 部 分 ,其 
中 头 部 描述 浏览 器 所 需 的 信息 ,主体 则 包含 所 要 说 明 的 具体 内 容 。HTML 网 页 文档 的 
基本 结构 中 主要 包含 HTML .head body 标记 。 


1. HTML 文件 标记 


过 HTML 之 和 过 /HTML 之 标记 放 在 网 页 文档 的 最 外 层 , 表 示 这 对 标记 间 的 内 容 是 
HTML 文档 。 过 HTML 过 放 在 文件 开头 ,二 /HTML 盖 放 在 文件 结尾 ,在 这 两 个 标记 中 
间 嵌 套 其 他 标记 。 一 个 HTML 文档 仅 有 一 对 二 HTML 之 和 所 /HTML>。 


2. head 文件 头 部 标记 


文件 头 用 所 head 之 和 所 /head 之 标记 ,该 标记 出 现在 文件 的 起 始 部 分 。 它 是 所 有 头 
部 元 素 的 容器 。 志 head> 中 的 元 素 可 以 引用 脚本 .指示 浏览 器 所 用 的 样式 表 、 提 供 元 信 
息 等 。 标 记 内 的 内 容 不 在 浏览 器 中 显示 ,主要 用 来 说 明文 件 的 有 关 信 息 , 如 文件 标题 \ 作 
者 、 编 写 时 间 搜索 引擎 可 用 的 关键 词 等 。 

可 用 在 head 部 分 标签 有 二 base 二 、 二 link 记 ,二 meta 祖 ,过 script 请 ,三 style 记 以 及 
<title 之 。<<title> 定义 文档 的 标题 , 它 是 head 部 分 中 唯一 必需 的 元 素 。 在 head 标记 
内 最 常用 的 标记 是 网 页 主题 标记 , 即 title 标记 , 它 的 格式 为 到 title 之 网 页 标题 二 /title> 。 

网 页 标题 是 提示 网 页 内 容 和 功能 的 文字 , 它 将 出 现在 浏览 器 的 标题 栏 中 。 一 个 网 页 
只 能 有 一 个 标题 ,并且 只 能 出 现在 文件 的 头 部 。 

一 个 HTML 文档 仅 有 一 对 二 head 之 和 二 /head> 。 


3. body 文件 主体 标记 


文件 主体 对 用 户 可 见 , 用 二 body 之 和 王 /body> 标 记 , 它 是 HTML 文档 的 主体 部 分 。 
一 个 HTML 文档 仅 有 一 对 二 body 二 和 到 /body 之 。 网 页 正文 中 的 所 有 内 容 , 包 括 文字 、 
表格 .图像 .声音 和 动画 等 ,都 包含 在 这 对 标记 对 之 间 。 通 常 的 标记 样式 如 下 : 


<body bgcolor= "white" text= "blue" link= "yellow" alink= "blue" vlink= "pink" leftmargin=" 
120px" topmargin= "150px"> 文 档 内 容 < /BODY> 


一 个 简单 HTML 文档 如 下 : 


< ! DOCTYPE HTML PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
XHTML1 /DTD/xHTML1- transitional.dtd"> 
< HIML xmlns= "http://www.w3.0rg/1999/xHIML"> 
<head> 
<meta http- equiv= "Content- Type" content—"text/HIML; charset=gb2312" /> 
<title> HIML5 文档 结构 < /title> 
< /head> 
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<body bgcolor="white" text="blue" link="yellow" alink="blue" vlink= "pink" 
topmargin="150px"> 
静夜 思 
李白 
床 前 明月 光 ， 
疑 是 地 上 有 霜 。 
举 头 望 明 月 ， 
低头 思 故 乡 。 
</body> 
< /HIML> 
综 上 所 述 ,HTML 是 用 来 描述 网 页 的 一 种 语言 。HTML 不 是 一 种 编程 语言 ,而 是 一 
种 标记 语言 (markup language)。 标 记 语言 是 一 套 标 记 标 签 (markup tag)。HTML 使 
用 标记 标签 来 描述 网 页 。HTML 标记 标签 通常 被 称 为 HTML 标签 (HTML tag)。 
HTML 标签 是 由 尖 括 号 包围 的 关键 词 ,比如 壹 HTML 之 。HTML 标签 通常 成 对 出 现 ， 
比如 过 body 之 和 过/body 之 。 标 签 对 中 的 第 一 个 标签 是 开始 标签 ,第 二 个 标签 是 结束 标 
签 。 开 始 和 结束 标签 也 被 称 为 开放 标签 和 闭合 标签 。HTML 文档 描述 网 页 ,包含 
HTML 标签 和 纯 文 本 ,因此 HTML 文档 也 被 称 为 网 页 。Web 浏览 器 的 作用 是 读 取 
HTML 文档 ,并 以 网 页 的 形式 显示 它们 。 浏 览 器 不 会 显示 HTML 标签 ,而 是 使 用 标签 ， 
以 不 同形 式 展示 页 面 内 容 , 使 页 面 内 容 显 示 格 式 丰 富 多 彩 。 


122 上 机 实验 样 例 


1. 编辑 HTML 文档 


可 使 用 Windows 桌面 系统 自 带 的 记事 本 或 写字 板 来 编写 简单 的 HTML ,或 使 用 专 
业 的 HTML 编辑 器 来 编辑 复杂 的 HTML 文档 。 专 业 的 HTML 编辑 器 有 Adobe 
Dreamweaver, Front Page、Microsoft Expression Web 、Coffee Cup HTMI Editor 和 
Microsoft Visual Studio 集成 开发 环境 等 编辑 器 。 本 书 选用 Microsoft Visual Studio 集 
成 开发 环境 编辑 HTML 文档 。 步 又 如 下 。 

(1) 启动 Microsoft Visual Studio 2010 

Visual Studio 2010 启动 后 的 界面 如 图 1.1 所 示 。 

(2) 新 建 网 站 

如 图 1.2 所 示 ,选择 图 1. 1 中 的 File 菜单 项 ,在 弹出 的 快捷 菜单 中 选择 New ,在 右 侧 
的 列表 中 选择 Web Site .…', 弹 出 图 1. 3 所 示 的 New Web Site 对 话 框 。 在 图 1. 3 中 选择 
ASP. NET Empty Web Site。 采 用 默认 的 网 站 位 置 为 C:\Users\lhb_dell\Documents\ 
Visual Studio 2010\ WebSites\WebSite2。 如 果 需 要 更 改 为 已 经 创建 的 文件 夹 , 则 需 单 击 
Browse 按钮 ,通过 资源 浏览 器 加 以 选择 。 单 击 图 1. 3 的 OK 按钮 , 则 成 功 创建 网 站 ,如 
图 1.4 所 示 。 网 站 的 名 称 为 网 站 位 置 的 最 底层 目录 名 WebSite2 。 
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图 1.1 Visual Studio 2010 集成 开发 环境 主 界面 
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1.2 在 Visual Studio 2010 集成 开发 环境 主 界面 中 新 建 网 站 
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1.3 New Web Site 对 话 框 
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1.4 新 建 的 WebSite2 网 站 


(3) 添加 HTML 文档 
在 图 1.4 中 选择 C:\...\ WebSite2\ 站 点 , 右 击 ,弹出 图 1.5 所 示 的 快捷 菜单 。 选 择 
Add New Item, 弹 出 图 1.6 所 示 的 对 话 框 。 在 图 1.6 的 Sort by 中 选择 HTML Page, 在 
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Name 文本 框 中 修改 默认 的 文件 名 为 SimpleHTMLStructure. htm。 单 击 Add 按钮 , 打 
开 图 1.7。 
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1.5 项 目 快捷 菜单 
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1.6 Add New Item 对 话 框 
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EM TE ET EM 
= XHTML 1.0 Tran 























辕 soution websitez (1 project) 
_ 4 一 CANWebsitez 
http://wwy, w3, org/1999/xhtnl @ SimpleHTMLStructure.htm 
名 web.confi 
title> /title> 全 由 
[Chead> 
Bcbody> 


/body> 
</html 


100% -< 
B Design | Split | 回 Source 





Command Window 


回 Command Window 





1.7 成 功 添加 SimpleHTMLStructure. htm 的 视图 


经 过 编辑 的 HTML 文档 如 图 1.8 所 示 。 


= 世上 加 加 | GHBII-H -CBIb lo -| 
订 卫 证 二 | 三 室 |[xHTMt 1.0Transitc -je ;| 





EEinEB 





























SimpleHTMLStructure htm_X 
Client Objects & Events -| (No Events) 国 忆 国正 而 
<IDOCTYPE html PUBLIC "~-//W3C//DID XHTML 1.0 Transitional//EN “http://www.w3. org/T 辐 Solution "WebSite| 

|‖ 也 cvNwebsite| 

htnl xnlns="http://wn, v3, org/1999/xhtnl” > @ SimpleHTM 
head) Db ond 





meta http-equiv="Content-Type” content="text/htnl: charset=gb2312" /> 
《title>HTWL5 文 档 结构 </title> 


/head> 
《body bgcolor="white” text="blue” link="yellow” alink="blue” vlink="pink” topmay 








| Wbody> 

/html> v 
10% -< > 
G Design | Split [@ Source | [J[<htmls] <body> 四 











= 回 command Window 


1.8 编辑 后 的 HTML 文档 
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2. 浏览 HTML 文档 


浏览 HTML 文档 有 两 种 方式 ,一 是 在 Visual Studio 2010 集成 开发 环境 中 浏览 ,二 
是 不 在 任何 集成 开发 环境 中 浏览 。 

(1) 在 集成 开发 环境 中 浏览 

如 果 没 有 设置 默认 浏览 器 ,可 以 选中 解决 方案 浏览 器 WebSite2 项 目 内 的 
SimpleHTMLStructure. htm , 右 击 弹出 快捷 菜单 ,如 图 1. 9 所 示 。 选 择 Browse With...， 
弹出 设置 默认 浏览 器 对 话 框 ,选择 Firefox, 单 击 Set as Default 按钮 ,如 图 1. 10 所 示 。 否 
则 直接 单 击 View in Browser, 弹 出 图 1.11 所 示 的 网 页 。 




















1.9 HTML 文档 快捷 菜单 


Browsers: 





Add... 





Internal Web Browser 


Internet Explorer 
QQ 浏览 器 Remove 











Set as Default 














Size of browser window: 
































1.10 设置 黑 认 浏览 器 对 话 框 
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€ | OD localhost11484/WebSite2/SimpleHTMLStructurehtm ”于 | C ||Q BE<C+k> | 女 自 叶 傅 罗 9-|- 
有 XI 祝 方 站 点 图 最 第 访问 加 火狐 计 方 站 点 者 新 手 上 路 园 党 用 网 址 园 京 革 高城 全 火 弧 主页 辐 党 用 网 址 四 京东 商城 








静夜 思 李白 床 前 明月 光 ， 疑 是 地 上 需 。 举 头 望 明 月 ， 低 头 思 故 多 。 





图 1.11 浏览 SimpleHTMLStructure. htm 网 页 


(2) 在 开发 环境 外 浏览 
在 资源 浏览 器 中 选择 SimpleHTMLStructure. htm, 右 击 ,弹出 快捷 菜单 ,选择 
Firefox, 如 图 1. 12 所 示 , 得 到 图 1.11 所 示 的 网 页 。 
































主页 ”共享 。 查看 v @@ 
图 本 "个 是 ， 库 ， 文 本 ，Visual Studio 2010 ，Projects ，Website2 v 避 | 再 家 WebSite2 六 
六 9 全称 修改 期” a 
及 下 图 websiez 2016/12/31 1547 _ Microsoft Visual Studio Solution 
加 二 [Osmpiemms es 
秆 地 5 访问 的 位 叶 EE 
1. Em (A. 
ED 总 2. 添加 到 文件 "SimpleHTMLStructurezip” 
国 视 弘 堵 3. FE "SimpleHTMLStructurezip" 并 Email 
加 图 上 FHA 5|© preamweavers 
日 邓 园 上 付 Wpsz 文 村 ®lm 
中 和 Internet Explorer 
bt 中 mm Microsoft Visual sudio 2010 
mi 虱 ho @ ows 
履 法 ba SimpleHTMLStucurerarm 
寺 计 若 机 同人 用 36033 力 宙 夫 
入 wins ( 〇 二 ”使 用 360 进 行 趟 马云 查 亲 
加 WinServer2008 (E) 
We 时 Ba#EmaiL- 
Ga dete (6] 履 Es "simpleHTMLStructure.rar" 并 E-mail 
8 Wioonsn » 
de 加 Se) 
| 人 可 EE 和) ， 
2 个 项 目 。 选中 1 个 项 目 488 闻 节 回 写 
IN) » 
buy) 
和 MO 
人 方式 (S) 
Ms(D) 
Ee 重 会 匀 (M) 
打开 文件 位 置 D 
性 (R) 


图 1.12 选择 SimpleHTMLStructure. htm 文档 的 浏览 方式 为 Firefox 
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3. 在 Firefox 浏览 器 中 的 查看 器 内 查看 HTML 文档 


按 F12 键 激活 SimpleHTMLStructure. htm 网 页 ,网 页 下 部 显示 开发 人 员 相关 工具 ， 
选择 “查看 器 ”选项 卡 ,默认 选中 body 标签 ,如 图 1. 13 所 示 。 双 击 标签 内 的 区 域 ,随即 启 
动 标签 内 相关 属性 或 文本 的 编辑 功能 ,双击 (静夜 思 ) 文 本 区 域 ,启动 文本 编辑 功能 ,在 
“李白 ”前 加 入 “作者 -”, 如 图 1. 14 所 示 。 按 回 车 键 , 则 对 编辑 予以 确认 ,并 退出 编辑 ,如 
图 1.15 所 示 。 





§€ OD file///c/Users/hb_delyDocuments/Visual Studio 2010/P, © ||Q BR <crizk> 让 | 自信 有 9 -全 - 


日 火 轴 计 方 站 点 加 最 过 访问 加 火 几 官方 站 点 者 新 手 上 小 加 军用 网 址 四 京东 商城 图 火 甩 主页 回 军用 网 址 四 | 京东 南城 


静夜 思 李白 床 前 明月 光 ， 缀 是 地 上 需 。 举 头 望 明 月 ， 低 头 思 故 乡 . 


[es 口 查看 兰 回 挤 制 台 口 调 # 喇 。。【《] 伴 式 绽 名 器 
搜索 HTML 
<1DOCTYPE html PUBLIC *-//WC//DTD XHTML 1.9 Transitional//EN" 
“nttp:// mm. Worg/ TR/ xhtml/ DTD/xntml1-transitional ata"> 
tp:/ /ww w3 .ori htmlvy 加 


€ OD file///c/Users/hbdelyDocuments/Vieual Studio 2010p， | 已 || Q FB Crisk> 会 | 自 呈 会 罗 久 |-- 
辐 X 铀 言 方 站 点 图 景 过 访问 园 火 中方 站 点 性 新 于 上 洛 国 军用 网 址 园 京东 两 城 名 火 攻 主 页 加 军用 网 址 加 京东 南城 





1.14 在 浏览 器 中 编辑 body 标签 中 的 文本 


值得 注意 的 是 ,在 浏览 器 中 确认 修改 标签 的 属性 或 文本 , 仅 对 当前 激活 的 浏览 器 一 
次 有 效 , 供 调试 观察 效果 所 用 ,SimpleHTMLStructure. htm 文档 源 文件 本 身 没 有 变化 。 
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€ OD fle//c/Users/ihb delypocumentyviaual studio 2010/pt | @ ||Q ER -Ck 位 | 自 于 会 罗 9 -日 - 





[i 





静夜 思 作者 -李白 床 前 明月 光 ， 坚 是 地 上 需 。 举 头 望 明 月 ， 低 头 思 故 乡 - 


oF Te Oms (mss CH 心 p 三 网 络 "器 
提 索 HTML 规则 计划 后 动画 
/ /M3C/ /DTD XHTML 1.0 Transitional/ /EN" 
onal .ora 


没有 法 择 元 素 * 





1.15 确认 修改 body 标签 中 文本 后 的 网 页 


再 次 按 下 F12 键 , 则 关闭 开发 人 员工 具 。 
123 实验 观察 与 思考 


(1) 在 Visual Studio 2010 开发 环境 中 ,以 个 人 学 号 和 姓名 建立 及 命名 网 站 ,网 站 的 
主题 为 : 个 人 姓名 十 “测试 HTML 文档 结构 ”。 新 增 SimpleHTMLStructure. htm', 在 
Firefox 浏览 器 中 的 查看 器 修改 图 1. 13 所 示 的 body 背景 色 。 

(2) 仔细 观察 图 1. 8 源 文档 中 body 标签 内 的 文本 部 分 , 诗 名 、 作 者 、4 句 诗 各 占 一 
行 , 共 6 行 ,但 经 浏览 器 显示 后 , 却 平 拉 为 1 行 ,分 析 原 因 并 给 出 解决 措施 。 


13 HTIML 基本 元 素 


一 个 网 页 由 许多 元 素 构 成 。HTML 定义 了 许多 基本 元 素 , 供 人 们 开发 丰富 的 网 页 。 
1.3.1 理论 知识 


HTML 标记 标签 通常 被 称 为 HTML 标签 (HTML tag)。HTML 标签 是 由 尖 括 号 
包围 的 关键 词 , 比 如 过 HTML 二 。HTML 标签 通常 是 成 对 出 现 的 ,比如 二 body 二 和 
反 /body> ,标签 对 中 的 第 一 个 标签 是 开始 标签 ,第 二 个 标签 是 结束 标签 ,开始 和 结束 标 
签 也 被 称 为 开放 标签 和 闭合 标签 。HTML 文档 是 由 HTML 元 素 定 义 的 。HTML 元 素 
是 从 开始 标签 (start tag) 到 结束 标签 (end tag) 的 所 有 代码 。 元 素 的 内 容 是 开始 标签 与 结 
束 标 签 之 间 的 内 容 。 某 些 HTML 元 素 具 有 空 内 容 (empty content) , 空 元 素 在 开始 标签 
中 进行 关闭 (以 开始 标签 的 结束 而 结束 )。 大 多 数 HTML 元 素 可 拥有 属性 。 大 多 数 
HTML 元 素 可 以 嵌 套 (可 以 包含 其 他 HTML 元 素 )。HTML 文档 由 嵌 套 的 HTML 元 
素 构成 。HTML 标签 对 大 小 写 不 敏感 。 
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HTML 元 素 的 基本 格式 如 下 : 

< 标签 名 属性 = 值 1 属性 2= 值 2……> 元 素 内 容 < /标签 名 > 

HTML 标签 可 以 拥有 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 信息 。 属 性 总 是 
以 名 称 / 值 对 的 形式 出 现 ,比如 name 二 "value"。 属 性 在 HTML 元 素 的 开始 标签 中 规定 。 


属性 值 应 该 始终 被 包括 在 引号 内 。 双 引号 是 最 常用 的 ,不 过 使 用 单 引号 也 没有 问 
题 。 在 某 些 个 别 的 情况 下 ,比如 属性 值 本 身 就 含有 双 引 号 ,就 必须 使 用 单 引号 ,例如 : 





name= 'Bill "HelloWorld" Gates' 


1. 常用 标签 


(1) 标题 
HTML 标题 很 重要 。 搜 索引 擎 使 用 标题 为 网 页 的 结构 和 内 容 编 制 索引 。 因 为 用 户 
可 以 通过 标题 来 快速 浏览 网 页 ,所 以 用 标题 来 呈现 文档 结构 是 很 重要 的 。 应 该 将 hl 用 
做 主 标题 (最 重要 的 ) ,其 后 是 h2( 次 重要 的 ) ,其 次 是 h3 ,以 此 类 推 。HTML 标题 是 通过 
二 hl 二 ~ 二 h6 二 等 标签 进行 定义 的 。 二 hl 二 定义 最 大 的 标题 。 二 h6 二 定义 最 小 的 标题 。 
浏览 器 会 自动 地 在 标题 的 前 后 添加 空 行 。 默 认 情 况 下 , HTML 会 自动 地 在 块 级 元 素 前 
后 添加 一 个 额外 的 空 行 ,比如 段落、 标题 元 素 前 后 。 
例 1-3-1-1 标题 的 简单 示例 。 
<html> 
<body> 
<hl> This is heading 1< /hl> 
<h2> This is heading 2< /h2> 
<h3> This is heading 3< /h3> 
<h4> This is heading 4< /h4> 
<h5> This is heading 5< /h5> 
<h6>This is heading 6< /h6> 
<P> 请 仅仅 把 标题 标签 用 于 标题 文本 。 不 要 仅仅 为 了 产生 粗 体 文本 而 使 用 它们 。 请 使 
用 其 他 标签 或 css 代替 。< /p> 
</body> 
</htm> 


(2) 段落 

段落 通过 二 p 二 标签 定义 。 二 p 二 是 块 级 元 素 , 浏 览 器 会 自动 地 在 段落 前 后 添加 空 
行 。 使 用 空 的 段落 标记 二 p 二 /p 二 去 插入 一 个 空 行 ,不 如 用 二 br/ 二 标签 代替 来 插入 空 
行 。 但 不 要 用 二 br/ 二 标签 去 创建 列表 。 不 要 忘记 结束 标签 ,即使 忘 了 使 用 结束 标签 ,大 
多 数 浏览 器 也 会 正确 地 将 HTML 显示 出 来 。 在 大 多 数 浏览 器 中 ,不 加 结束 标签 没 问 题 ， 
但 不 要 依赖 这 种 做 法 。 忘 记 使 用 结束 标签 ,有 时 会 产生 意 想不到 的 结果 和 错误 。 

在 未 来 的 HTML 版 本 中 ,不 允许 省 略 结束 标签 。 通 过 结束 标签 来 关闭 HTML 是 一 
种 经 得 起 未 来 考验 的 HTML 编写 方法 。 清 楚 地 标记 某 个 元 素 在 何 处 开始 ,并 在 何 处 结 
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东 , 不 论 对 网 页 设计 者 还 是 对 浏览 器 来 说 ,都 会 使 代码 更 容易 理解 。 
例 1-3-1-2 段落 应 用 的 简单 示例 。 


<html> 
<body> 
<hl> 春 晓 < /hl> 
<p> 
春 眼 不 觉 晓 ， 
处 处 闻 啼 鸟 。 
夜来 风雨 声 ， 
花 落 知 多 少 。 
</p> 
<p> 注 意 , 浏 览 器 忽略 了 源 代码 中 的 排版 (省 略 了 多 余 的 空格 和 换行 )。< /p> 
< /body> 
</html> 


(3) 折 行 

在 不 产生 一 个 新 段落 的 情况 下 进行 换行 ,使 用 二 br/ 二 > 标签。 二 br/ 二 元 素 是 一 个 空 
的 HTML 元 素 。 由 于 关闭 标签 没有 任何 意义 ,因此 它 可 以 没有 结束 标签 。 在 XHTML、 
XML 以 及 未 来 的 HTML 版 本 中 ,不 允许 使 用 没有 结束 标签 (闭合 标签 ) 的 HTML 元 素 。 
即使 二 br 二 在 所 有 浏览 器 中 的 显示 都 没有 问题 ,使 用 二 br/ 二 也 是 更 长 远 的 保障 。 

例 1-3-1-3 折 行 的 简单 示例 。 


<html> 
<body> 
<p> 
To break<br /> lines<br /> in a<br />paragraph, <br />use the br tag. 
</p> 
< /body> 
</html> 


(4) 水 平 线 
二 hr/ 二 标签 在 HTML 页 面 中 创建 水 平 线 。hr 元 素 可 用 于 分 隔 内 容 。 
例 1-3-1-4 一 个 水 平 线 的 简单 示例 。 


<html> 

<body> 
<p>hr 标签 定义 水 平 线 :< /p> 
<hr /> 
<pP> 这 是 段落 。< /p> 
<hr /> 
<P> 这 是 段落 。< /p> 
<hr /> 
<P> 这 是 段落 。< /p> 

< /body> 
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</htm> 


(5) 注释 

通过 如 下 语法 向 HTML 源 代码 添加 注释 : 

<!-- 在 此 处 写 注释 --> 

开始 标签 中 有 一 个 惊叹 号 ,但 是 结束 标签 中 没有 。 浏 览 器 不 显示 注释 ,但 能 够 帮助 
记录 设计 者 的 HTML 文档 。 可 以 利用 注释 在 HTML 中 放置 通知 和 提醒 信息 。 注 释 对 
于 HTML 纠 错 也 大 有 帮助 ,因为 可 以 一 次 注释 一 行 或 多 行 HTML 代码 ,以 搜索 错误 。 

例 1-3-1-5 使 用 注释 的 示例 。 





< !DOCTYPE html> 
<html> 
<body> 
<!-- 这 是 一 段 注释 。 注 释 不 会 在 浏览 器 中 显示 。--> 
<p> 这 是 一 段 普通 的 段落 。< /p> 
</body> 
</html> 


(6) 链接 

HTML 使 用 超级 链接 与 网 络 上 的 另 一 个 文档 相连 。 几 乎 可 以 在 所 有 网 页 中 找到 链 
接 。 单 击 链接 可 以 从 一 张 页 面 跳 转 到 另 一 张 页面 。 超 链接 可 以 是 一 个 字 一 个 词 或 者 一 
组 词 ,也 可 以 是 一 幅 图 像 ,可 以 单 击 这 些 内 容 跳 转 到 新 的 文档 或 当前 文档 中 的 某 个 部 分 。 
当 把 鼠标 指针 移动 到 网 页 中 的 某 个 链接 上 时 ,箭头 会 变 为 一 只 小 手 。 通 过 使 用 二 a 二 标 
签 在 HTML 中 创建 链接 。 

有 两 种 使 用 二 a> 标签 的 方式 : 

。 href 属性 : 创建 指向 另 一 个 文档 的 链接 。 

。 name 属性 : 创建 文档 内 的 书签 。 

HTML 链接 最 简单 的 语法 如 下 : 


<a href= "url"> Link text< /a> 


OQ@ href 属性 。 

href 属性 规定 链接 目标 。 开 始 标签 和 结束 标签 之 间 的 文字 作为 超级 链接 来 显示 。 
链接 目标 必须 为 url 地 址 ,如果 没 有 给 出 具体 路 径 , 则 默认 路 径 和 当前 页 的 路 径 相 同 。 链 
接 到 的 文件 也 分 为 几 种 情况 : 如 果 为 HTML 文件 , 则 在 当前 浏览 器 中 直接 打开 ;如 果 为 
可 执行 文件 (. exe 文件 ) , 则 直接 执行 或 下 载 ,网 页 提供 的 下 载 文件 就 是 用 这 种 特性 实现 
的 ;如 果 为 文本 文件 ,如 word 格式 的 文件 , 则 在 浏览 器 中 打开 此 文件 ,并 可 以 进行 编辑 
加 工 。 

例 1-3-1-6 ”href 属性 实现 超 链 接 的 示例 。 








<html> 
<body> 


人 nanaxsaaa 





<p> 
<a href="/index.html"> 本 文本 </a> 是 一 个 指向 本 网 站 中 的 一 个 页 面 的 链接 。< /p> 
<p><a href= "http://www.microsoft.com/"> 本 文本 </a> 是 一 个 指向 万 维 网 上 的 页 面 
的 链接 。< /p> 
< /body> 

</html> 

@ target 属性 。 

使 用 target 属性 ,可 以 定义 被 链接 的 文档 在 何 处 显示 。target 属性 的 枚 举 值 如 下 

所 列 : 
*。 _blank 


<a href= "example.html" target=" blank">example< /a> 
浏览 器 会 另 开 一 个 新 窗口 显示 example. html 文档 。 
。 _parent 
<a href= "example.html" target=" parent"> example< /a> 
指向 父 frameset 文档 。 
。 _self 
<a href= "example.html" target=" self"> example< /a> 
把 文档 调 入 当前 页 框 。 
。 _top 
<a href= "example.html" target=" top">example< /a> 


去 掉 所 有 页 框 ,并 用 document. html 取代 frameset 文档 。 

@ name 属性 。 

name 属性 规定 锚 (Canchor) 的 名 称 。 可 以 使 用 name 属性 创建 HTML 页 面 中 的 书 
签 。 书 签 不 会 以 任何 特殊 方式 显示 , 它 对 读者 是 不 可 见 的 。 当 使 用 命名 锚 (named 
anchors) 时 ,可 以 创建 直接 跳 至 该 命名 锚 ( 比 如 页 面 中 某 个 小 节 ) 的 链接 ,这 样 使 用 者 就 无 
须 不 停 地 滚动 页 面 来 寻找 所 需要 的 信息 了 。 

命名 锚 的 语法 : 


<aname="label"> 锚 (显示 在 页 面 上 的 文本 )< /a> 


锚 的 名 称 可 以 是 任何 名 字 。 可 以 使 用 id 属性 来 替代 name 属性 ,命名 锚 同 样 有 效 。 
例 1-3-1-7 锚 应 用 的 简单 示例 。 
首先 ,在 HTML 文档 中 命名 锚 (创建 一 个 书签 ) : 


<a name= "tips"> 基 本 的 注意 事项 -有 用 的 提示 < /a> 
然后 ,在 同一 个 文档 中 创建 指向 该 锚 的 链接 : 


<a href= 哇 tips"> 有 用 的 提示 < /a> 


#0: HTML 基础 
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也 可 以 在 其 他 页 面 中 创建 指向 该 锚 的 链接 : 
<a href= "http://www.w3school.com.cn/html/html links.asp#tips"> 有 用 的 提示 < /a> 


在 上 面 的 代码 中 ,将 # 符 号 和 锚 名 称 添 加 到 URL 的 末端 , 则 可 以 直接 链接 到 tips 这 


(7) 图 像 

可 以 在 HTML 文档 中 显示 图 像 。 在 HTML 中 ,图 像 由 天 img 之 标签 定义 。 一 img> 
是 空 标签 , 它 只 包含 属性 ,并 且 没 有 闭合 标签 。 要 在 页 面 上 显示 图 像 ,需要 使 用 源 属性 
src。 源 属性 值 是 图 像 的 URL 地 址 。 

定义 图 像 的 语法 是 : 





< img src="url" /> 


URL 指 存储 图 像 的 位 置 。 如 果 名 为 boat. gif 的 图 像 位 于 www. w3school. com. cn 
的 images 目录 中 ,那么 其 URL 为 http://www. w3school. com. cn/images/boat. gif。 

浏览 器 将 图 像 显示 在 文档 中 图 像 标 签 出 现 的 地 方 。 如 果 将 图 像 标 签 置 于 两 个 段落 
之 间 , 那 么 浏览 器 会 首先 显示 第 一 个 段落 ,然后 显示 图 片 ,最 后 显示 第 二 段 。 

alt 属性 用 来 为 图 像 定义 一 串 预 备 的 可 替换 的 文本 。 蔡 换文 本 属性 的 值 是 用 户 定义 
的 。 例 如 过 img src 一 "boat. gif" alt= 王 "Big Boat" 之 。 在 浏览 器 无 法 载 入 图 像 时 ,替换 文 
本 属性 告诉 读者 失去 的 信息 。 此 时 ,浏览 器 将 显示 这 个 替代 性 的 文本 而 不 是 图 像 。 为 页 
面 上 的 图 像 都 加 上 替换 文本 属性 是 个 好 习惯 ,这 样 有 助 于 更 好 地 显示 信息 ,对 于 那些 使 
用 纯 文本 浏览 器 的 人 来 说 ,这 是 非常 有 用 的 。 

假如 某 个 HTML 文件 包含 10 个 图 像 , 为 了 正确 地 显示 这 个 页 面 ,需要 加 载 11 个 文 
件 。 加 载 图 片 是 需要 时 间 的 ,所 以 慎 用 图 片 。 

例 1-3-1-8 显示 一 张 图 片 的 简单 示例 。 


<html xmlns= "http://www.w3.o0rg/1999/xhtml"> 
<head><title></title>< /head> 
<body> 
<p> 一 幅 图 像 :< img src= "Images/0.jpg" width= "128" height= "128" alt= "灯具 "/></ 
p> 
<p> 一 幅 动 画图 像 : 
< img src= "http://www.w3school .com.cn/i/eg cute.gif" width= "50" height="50" 
alt=""/> 
</p> 
<p> 请 注意 ,插入 动画 图 像 的 语法 与 插入 普通 图 像 的 语法 没有 区 别 。< /p> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 16 所 示 。 
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所 OD localhost34734/ 源 BB 训 辐 | C || Q SEE-<crx | 2 三 





加 火 特 官方 站 点 园 最 党 访问 加 火狐 言 方 站 点 芒 新 手 上 路 。 » 日 移动 设备 上 的 书签 
和 


一 相 动 画图 像 : 


请 注意 ,插入 动画 图 像 的 语法 与 插入 普通 图 像 的 语法 没有 区 别 。 





图 1.16 例 1-3-1-8 的 浏览 器 显示 


中 背景 图 片 。 
例 1-3-1-9 背景 图 片 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head><title></title>< /head> 
<body background= "Images/0.jpg"> 
<h3> 图 像 背景 < /h3> 
<p>gif 和 jpg 文 件 均 可 用 做 HIML 背景 。< /p> 
<p> 如 果 图 像 小 于 页 面 ,图 像 会 进行 重复 。< /p> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 17 所 示 。 


轩 localhost:34734/ 源 Ex 昌国 = 


CC 全 中” 次 localhost34 下 器 》 图 - 高校 其 未 考 4 图 Q 











图 百度 合 及 i 杭 顷 -中 国 领 先 … 上 网 导航 售 热门 游戏 ”人 应 用 中 心 











1.17 例 1-3-1-9 的 浏览 器 显示 


@ 对 齐 方式 。 
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例 1-3-1-10 ”对 齐 方式 使 用 示例 。 


<html xmlns= "http://www.w3.0org/1999/xhtml"> 


<head> 


<title></title> 


< /head> 
<body> 


<h2> 未 设置 对 齐 方式 的 图 像 :< /h2> 


<p> 图 


像 < img src="http://www.w3school.com.cn/i/eg_cute.gif" alt=" 默 认 "/> 在 文 


本 中 默认 对 齐 < /p> 
<h2> 已 设置 对 齐 方式 的 图 像 :< /h2> 


<p> 图 


像 <img src= "http://www.w3school.com.cn/i/eg cute.gif" align= "bottom" alt 


=" 底 部 "/> 在 文本 中 底部 对 齐 < /p> 


<p> 图 


像 < img src= "http://www.w3school.com.cn/i/eg cute.gif" align= "middle" alt 


=" 中 部 "/> 在 文本 中 中 部 对 齐 < /p> 





<p> 图 


像 < img src= "http://www.w3school.com.cn/i/eg_cute.gif" align= "top" alt=" 


顶部 "/> 在 文本 中 顶部 对 齐 < /p> 
<p> 请 注意 ,bottom 对 齐 方式 是 默认 的 对 齐 方式 。< /p> 


< /body> 
</html> 


浏览 器 显示 如 图 1. 18 所 示 。 


《jp-nm x \ > + 





€ Ollocalhost347 转 |C|I» 三 
加 火 多 官方 站 点 加 最 党 访问 » 章 移 动 设 备 上 的 书签 


未 设置 对 齐 方式 的 图 像 : 

图 像 险 三 在 文本 中 默认 对 齐 

已 设置 对 齐 方式 的 图 像 : 
图 像 名 2 舌 在 文本 中 底部 对 齐 
图 像 2 在 文本 中 中 部 对 齐 


图 像 fj 在 文本 中 顶部 对 齐 


Wa 














v 








1.18 例 1-3-1-10 的 浏览 器 显示 
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@ 浮动 。 
例 1-3-1-11 浮动 使 用 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<p> 
< img src= "http://www.w3school.com.cn//i/eg cute.gif" align="left"> 
带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "left"。 图像 将 浮动 到 文本 的 左 侧 。 
</p> 
<p> 
< img src= "http://www.w3school .com.cn//i/eg cute.gif" align= "right"> 
带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "right"。 图 像 将 浮动 到 文本 的 右 侧 。 
</p> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 19 所 示 。 


志 | 四 | localhost34734/ 源 程序 / 例 1-08-3-| 回 跨 | | BE -cmrk> 合 自 吕 人 会» 
加 * 妆 官方 站 点 加 最 党 访问 器 火狐 官方 站 点 功 | 新手 上 路 加 常用 网 址 四 京东 商城 各 火狐 主页 。» 中 移动 设备 上 的 书签 


带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "left"。 图 像 将 浮动 到 文本 的 左 侧 。 
图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "right"。 图 像 将 浮动 到 文本 的 右 侧 。 
A 





1.19 例 1-3-1-11 的 浏览 器 显示 


@ 调整 大 小 。 
例 1-3-1-12 调整 大 小 的 示例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head><title></title>< /head> 
<body> 
< img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="50" height="50" 
alt=""/><br/> 
< img src= "http://www.w3school .com.cn/i/eg_mouse.jpg" width= "100" height="100" 
alt="™"/><br/> 
<p> 通 过 改变 img 标签 的 "height" 和 "width" 属性 的 值 ,您 可 以 放大 或 缩小 图 像 。</ 
p> 
< /body> 
</htm> 


2 人 3 





浏览 器 显示 如 图 1. 20 所 示 。 


所 | localhost34734/ 源 程序/ 全 1-0: 团 | C | Q SEE<Cotk> 
加 x 官方 站 点 加 最 第 访问 加 火 玫 记 方 涉 点 者 新 手 上 路 加 染 用 网 址 





通过 改变 img 标签 的 "height" 和 "width 属性 的 值 ， 您 可 以 放大 或 缩小 图 像 。 





pp a 
> | 


图 1.20 例 1-3-1-12 的 浏览 器 显示 


加 制作 图 像 链 接 。 
例 1-3-1-13 图 像 链 接 的 示例 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head><title>< /title>< /head> 
<body> 
<p> 
您 也 可 以 把 图 像 作为 链接 来 使 用 : 
<a href="hello.htm"> 
< img border= "0" src= "http://www.w3school.com.cn/i/eg_ 
buttonnext .gif" alt=""/> 
</a> 
</p> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 21 所 示 。 


€ Olocalhost34734/ 园 | C ||Q BE <Cirtk> » 三 





司 火狐 启 方 站 点 园 最 常 访问 芭 火狐 官方 站 点 » 中 移动 设备 上 的 书签 


您 也 可 以 把 图 像 作为 链接 来 使 用 : 





图 1.21 例 1-3-1-13 的 浏览 器 显示 
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(8) 列表 。 

HTML 支持 有 序 .无 序 和 定义 列表 。 

@ 无 序列 表 。 

无 序列 表 是 一 个 项 目的 列表 ,此 列 项 目 使 用 粗 体 圆 点 (典型 的 小 黑 圆 圈 ) 进 行 标记 。 
无 序列 表 始 于 二 ul 二 标签 。 每 个 列表 项 始 于 一 li>。 

例 1-3-1-14 无 序列 表 的 示例 。 


< !DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtmll1/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<h4> 一 个 无 序列 表 :< /h4> 
<ul> 
<1i> 咖 啡 < /1i> 
<1i> 茶 </1i> 
<1i> 牛 奶 </1i> 
</ul> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 22 所 示 。 


所 ) @ | localhost34734/ 源 程序 / 例 1-8- 无 序 5 妹 ” 加 | C ||Q ER<cmrk> | 


司 WW 官方 站 点 圆 最 党 访问 加 火 弧 官方 站 点 者 新 手 上 路 加 常用 网 址 四 京东 商城 


一 个 无 序列 表 : 





图 1.22 无 序列 表 的 浏览 器 显示 


列表 项 内 部 可 以 使 用 段落 .换行 符 、 图 片 链接 以 及 其 他 列表 等 。 

@ 有 序列 表 。 

同样 ,有 序列 表 也 是 一 列 项 目 ,列表 项 目 使 用 数字 进行 标记 。 有 序列 表 始 于 二 ol 二 标 
签 。 每 个 列表 项 始 于 二 li 二 标签 。start 属性 指明 序号 起 始 值 。 列 表 项 内 部 可 以 使 用 段 
落 .换行 符 、 图 片 .链接 以 及 其 他 列表 等 。 

例 1-3-1-15 有 序列 表 的 示例 。 


< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 


OO 
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xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xzmlns= "http://www.w3.org/1999/xhtmln> 
<head> 
<title>< /title> 
</head> 
<body> 
<ol> 
<1i> 咖 啡 < /1i> 
<1i> 牛 奶 < /1i> 
<1i> 茶 </1i> 
</ol> 
<ol start= "50"> 
<1i> 咖 啡 < /1i> 
<1i> 牛 奶 </1i> 
<1i> 茶 </1i> 
</ol> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 23 所 示 。 


霹 localhost34734/ 源 程序 / 例 。 园 CG | Q E 全 <Ct+k> 个 | 由 > 
回 官方 站 点 贺 最 党 访问 加 火狐 官方 站 点 莉 新 手 上 路 加 常用 网 址 园 京东 商城 





1. 咖啡 
2. 牛 奶 
3. 茶 


50. 咖啡 
51. 牛奶 
52. 茶 


1.23 有 序列 表 的 浏览 器 显示 


(9) 表格 


表格 由 二 table 二 标签 定义 。 每 个 表格 均 有 若干 行 ( 由 二 tr 二 标签 定义 ) ,每 行 被 分 割 
为 若干 单元 格 ( 由 二 td 二 标签 定义 )。 字 母 td 指 表格 数据 (table data) , 即 数据 单元 格 的 内 
容 。 数 据 单 元 格 可 以 包含 文本 、 图 片 、 列 表 、 段 落 、 表 单 、 水 平 线 、 表 格 等 。 如 果 不 定义 边 
框 属性 ,表格 将 不 显示 边框 。 有 时 这 很 有 用 ,但 是 大 多 数 时 候 , 需 要 显示 边框 。 使 用 边框 
属性 (border) 可 以 显示 一 个 带 有 边框 的 表格 。 


例 1-3-1-16 表格 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
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< /head> 
<body> 
<table border="1"> 
<tr> 
<td> row 1, cell 1< /td> 
<td> row 1, cell 2< /td> 
/ts 
<tr> 
<td> row 2, cell 1< /td> 
<td> row 2, cell 2< /td> 
</tr> 
</table> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 24 所 示 。 

@ 表 头 。 

表格 的 表 头 使 用 二 th 二 标签 定义 。 大 多 数 浏览 器 
例 1-3-1-17 带 表 头 的 表格 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>< /title> 
< /head> 
<body> 
<table border="1"> 
<tr> 
<th> Heading< /th> 
<th> Another Heading< /th> 
</tr> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2< /td> 
</tr> 
<tr> 
<td> row 2, cell 1< /td> 
<td> row 2, cell 2< /td> 
< 
</table> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 25 所 示 。 
@ 空 单 元 格 。 
在 一 些 浏览 器 中 ,没有 内 容 的 表格 单元 显示 效果 





[row 1, cell 1lrow 1, cell 2 
[row 2, cell 1Irow 2, cell 2 

















图 1.24 例 1-3-1-16 的 浏览 器 显示 


会 把 表 头 显示 为 粗 体 居中 的 文本 。 








Heading |Another Heading 


row 1, cell 1 lrow 1, cell 2 














row 2, cell 1 Irow 2, cell 2 





























1.25 例 1-3-1-17 的 浏览 器 显示 


#@@= HTML 基础 2 





不 好 。 如 果 某 个 单元 格 是 空 的 (没有 内 容 ) ,浏览 器 可 能 无 法 显示 出 这 个 单元 格 的 边框 。 
为 了 避免 这 种 情况 ,在 空 单元 格 中 添加 一 个 空格 占 位 符 (&nbsp), 就 可 以 将 边框 显示 
出 来 。 

@ 标题 。 

caption 元 素 定义 表格 标题 。caption 标签 必须 紧 随 table 标签 之 后 。 只 能 对 每 个 表 
格 定义 一 个 标题 。 通 常 标题 居中 于 表格 之 上 。 

例 1-3-1-18 带 有 标题 的 表格 示例 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<h4> 这 个 表格 有 一 个 标题 以 及 粗 边框 :< /h4> 
<table border="6"> 
<caption align= "top"> 我 的 标题 < /caption> 
<tr> 
<td> 100< /td> 
<td> 200< /td> 
<td> 300< /td> 
</tr> 
<tr> 
<td> 400< /td> 
<td> 500< /td> 
<td> 600< /td> 
</tr> 
</table> 
< /body> 这 个 表格 有 一 个 标题 以 及 粗 边 框 : 
</htm> 


浏览 器 显示 如 图 1. 26 所 示 。 
@ 跨 列 。 

跨 列 由 属性 colspan 设置 。 
例 1-3-1-19 ” 跨 列 表格 示例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<table border="2" align= "center"> 
<caption> 创 建 表格 < /caption> 
ts 
<th colspan= "3"> 第 一 学 期 < /th> 


我 的 标题 
100|200|300 



























1.26 例 1-3-1-18 的 浏览 器 显示 
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<th colspan= "3"> 第 二 学 期 </th> 

</tr> 

<tr> 
<td> 数 学 </td> 
<td> 科 学 </td> 
<td> 英 语 </td> 
<td> 数 学 </td> 
<td> 科 学 </td> 
<td> 英 语 </td> 

</tr> 

<tr> 
<td> 98< /td> 
<td> 95< /td> 
<td> 80< /td> 
<td> 95< /td> 
<td> 87< /td> 
<td> 88< /td> 

</tr> 

</table> 


< /body> 创建 表格 
Sn 第 -学 期 | 第 -学 期 _ 

请 呈 寺 二 由 学 且 学 院 滞 车 学 提 学 区 滞 
浏览 器 显示 如 图 1. 27 所 示 。 Be ss so ls |e7 Jes 
@ 跨行 。 ee 
跨行 由 rowspan 属性 设置 。 1.27 例 1-3-1-19 的 浏览 器 显示 
例 1-3-1-20 ”跨行 表格 示例 。 



























<html xmlns= "http://www.W3.org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<table border= "1" align= "center"> 
<caption> 创 建 表 格 < /caption> 
> 
<th colspan= "2">< /th> 
<th> 螺 母 < /th> 
<th> 螺 栓 < /th> 
<th> 锤 子 < /th> 
< /tr> 
<tr> 
<td rowspan= "3"> 第 一 季度 < /td> 
<td> 一 月 </td><td> 2500< /td><td> 1000< /td><td> 1240< /td> 
</tr> 


<tr> 
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<td> 二 月 < /td><td> 3000< /td><td> 2500< /td>< td> 4000< /td> 


</tr> 
tr 


<td> 三 月 </td><td> 3200< /td><td> 1000< /td>< td> 2400< /td> 


</tr> 
</table> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 28 所 示 。 

@ 表格 内 标签 。 

表格 的 单元 格 可 以 含有 标签 ,这 非常 重要 ,因此 表 
格 不 但 内 容 显示 样式 丰富 ,而且 可 用 于 布局 。 

例 1-3-1-21 表格 单元 格 含 有 标签 的 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<table border= "1"> 
<tr> 
<td> 
<p> 这 是 一 个 段落 。</p> 
<p> 这 是 另 一 个 段落 。</p> 
</td> 
<td> 这 个 单元 包含 一 个 表格 : 
<table border="1"> 
<tr><td>R< /td><td>B< /td>< /tr> 
<tr><td>C< /td><td> D< /td>< /tr> 
</table> 
</td> 
</tr> 
lly 
<td> 这 个 单元 包含 一 个 列表 : 
<ul> 
<1i> 革 果 </1i> 
<1i> 香 攻 </1i> 
<1i> 菠 葛 </1i> 
</ul> 
</td> 
<td> HELLO< /td> 
二 
</table> 
< /body> 


创建 表格 
| 量 本 | 晶 恰 | 生子 | 
三 月 Psootooo[1240| 
第 一 季度 | 二 月 |3000|2500|4000| 
三 月 |8200|1ooo|24o0| 


















































图 1.28 例 1-3-1-20 的 浏览 器 显示 
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</htm> 


浏览 器 显示 如 图 1. 29 所 示 。 

@ 单元 格 边 距 (cellpadding)。 

使 用 cellpadding 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 。 
例 1-3-1-22 设置 padding 属性 的 表格 示例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 
<h4> 没 有 cellpadding:< /h4> 
<table border="1"> 
<tr><td>First< /td><td>Row< /td> < /tr> 
<tr><td> Second< /td><td> Row< /td>< /tr> 
</table> 
<h4> 带 有 cellpadding:< /h4> 
<table border= "1" cellpadding= "10"> 
<tr><td>First< /td><td> Row< /td> < /tr> 
<tr><td> Second< /td><td> Row< /td>< /tr> 
</table> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 30 所 示 。 











































































































没有 cellpadding : 
受训 一 椒 各 交 | 这 个 单元 包含 一 个 表格 : First [Row| 
IAlB Second |Row, 
这 是 另 一 个 段落 。 dD 四 
/== 带 有 cellpadding : 
及 个 单元 包含 一个 列表 : eng 
。 苹果 First R 
。 香 藉 HELLO rs OW 
。 菠萝 | Second | Row 
图 1.29 例 1-3-1-21 的 浏览 器 显示 图 1.30 例 1-3-1-22 的 浏览 器 显示 


单元 格 间距 。 
使 用 cellspacing 增加 单元 格 之 间 的 距离 。 
例 1-3-1-23 设置 spacing 属性 的 表格 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
< /head> 
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<body> 
<h4> 没 有 cellspacing:< /h4> 
<table border="1"> 
<tr><td>First< /td><td>Row< /td>< /tr> 
<tr><td> Second< /td>< td> Row< /td>< /tr> 
</table> 
<h4> 带 有 cellspacing:< /h4> 
<table border= "1" cellspacing= "10"> 
<tr> 
<td>First< /td><td> Row< /td> 
< /tr> 
<tr> 
<td> Second< /td>< td> Row< /td> 
</tr> 
</table> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 31 所 示 。 

@ 表格 背景 。 

表格 背景 颜色 由 属性 bgcolor 设置 ,表格 背景 图 片 由 其 属性 background 设置 。 
例 1-3-1-24 设置 bgcolor 属性 的 表格 示例 。 


<h4> 背 景 颜 色 :< /h4> 
<table borqder= "1" bgcolor= "red"> 
<tr><td> First< /td><td> Row< /td>< /tr> 
<tr><td> Second< /td>< td>Row< /td>< /tr> 
</table> 
<h4> 背 景 图 像 :< /h4> 
<table border= "1" background= "http://www.W3school.com.cn/i/eg bg 07.gif"> 
<tr><td> First< /td><td> Row< /td>< /tr> 
<tr><td> Second< /td><td>Row< /td>< /tr> 
</table> 


浏览 器 显示 如 图 1. 32 所 示 。 
没有 cellspacing : 


ELT 
月 





First Row 




















Second Row 


带 有 cellspacing : 





First Row| 




















Second Row | 























1.31 例 1-3-1-23 的 浏览 器 显示 1.32 例 1-3-1-24 的 浏览 器 显示 
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@ 单元 格 背 景 。 
单元 格 也 有 背景 颜色 属性 bgcolor 和 背景 图 片 属性 background, 分 别 用 于 设置 背景 
颜色 和 背景 图 片 。 


例 1-3-1-25 设置 单元 各 背景 示例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 
<h4> 单 元 格 背景 :< /h4> 
<table border="1"> 
<tr> 
<td bgcolor= "red"> First< /td>< td> Row< /td> 
</tr> 
<tr> 
<td background= "http://www.w3school .com.cn/i/eg bg 07.gif"> 
Second< /td> 
<td> Row< /td> 
< /tr> 
</table> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 33 所 示 。 


(10) 文本 格式 化 
文本 格式 化 标签 如 表 1. 1 所 示 。 


单元 格 背景 : 


[I 


1.33” 例 1-3-1-25 的 浏览 器 显示 
































表 1.1 文本 格式 化 标签 

标 签 描 述 标 签 描 述 

<b> 定义 粗 体 文本 <strong> 定义 加 重 语气 
=<big> 定义 大 号 字 =sub> 定义 下 标 字 
<em> 定义 着 重文 字 < 一 sup 二 定义 上 标 字 

去 这 定义 斜体 字 <ins> 定义 插入 字 
=small> 定义 小 号 字 =del> 定义 删除 字 
(11) 预 格式 化 


使 用 pre 标签 对 空 行 和 空格 进行 控制 。 
例 1-3-1-26 具有 预 格式 化 标签 的 文档 示例 。 





<html xmlns= "http://www-w3.org/1999/xhtml"> 


<head> 


<title>< /title> 


</head> 
<body> 
<pre> 
预 格式 文本 。 
它 保留 了 空格 
和 换行 。 


< /pre> 


<p>pre 标签 很 适合 显示 计算 机 代码 : < /p> 


<pre> 
for i=1 to 10 
print i 
next i 
< /pre> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 34 所 示 。 


(12) 特殊 字符 
特殊 字符 如 表 1. 2 所 示 。 
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和 换行 。 


Pre 标签 很 适合 显示 计算 机 代码 : 


fori=1to10 


print i 
next i 


1.34 例 1-3-1-26 的 浏览 器 显示 



























































表 1.2 特殊 字符 表 

字符 命名 字符 命名 字符 命名 
A &. Alpha; B &.Beta; 下 B&Gamma; 
A &. Delta; E &.Epsilon; 全 BZeta; 
H &. Eta; 9 & Theta; BTota; 
K &. Kappa; A Lambda; M & Mu; 
N & Nu; 名 & Xi; O & Omicrony 
I &Pi; 了 &Rho; SS &Sigmas 
里 & Tau; T &.Upsilon; 下 &.Phi; 
x &Chis Vv &Psi; 0 &Omegas 
a &.alpha; B &.beta; 7 &gammas; 
6 Bdelta; E & epsilon; Bzetas 
1 Retas 0 &.thetas 4 Riota; 
Bkappas 入 RE 攻 &mui 
y Rnu; & Cxis 0 & omicron; 
区 R& pi & rho 笃 Bsigmaf ; 
o Bsigma; Tt Rtau; v & upsilon; 
9 & phi; x & chii; 由 Bpsis 
中 RE omega & thetasym; 口 & upsih; 
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续 表 
字符 命名 字符 命名 字符 命名 
R& piv; . &bull; 0 & hellip; 
& prime; a &Prime; &.oline; 
/ Bfrasl; 8 .weierp; i &.image; 
洗 Rreal; 3 Rtrade; 锦 Balefsym; 
二 Blarr; 个 Ruarr; 一 Rrarrs 
y Rdarr; > Bharr; 四 Rcrarrs; 
BlArr; ? RuArr; 时 RrArr; 
? BdArr; &hArr; ? &.forall; 
9 Rpart; Rexist; ? &empty; 
? Bnabla; [3 Risin; ? & notin; 
? Rni; I & prod; _ & sumy 
- & minus， 多 Blowast; JV Bradics; 
cc &.prop; co &infin; 人 R& ang; 
人 R& and; V R& or; Nn &.cap; 
U Bcup; | Rint; 二 &there4; 
本 & simy 时 Bcong; ~ Basymp; 
天 Rne; 三 & equiv; < &le; 
之 R&ge; ? & sub; ? Rsup; 
? &.nsub; 员 Bsube; ? &.supe; 
© &oplus; 图 & otimes 糯 &.perp; 
2 Bsdots 加 & lceil; 全 Brceil; 
4 & lfloor; 8 &rfloor; 9 Bloz; 
? &.spades; C2 &.clubs; 里 Rhearts; 
呈 & diams; R&nbsp; i .iexcl; 
多 Bcent; 忆 & pound; | Recurreni 
¥ Ryen; > Rbrvbar; § Rsect; 
& uml; @ Rcopy; ' &.ordf; 
《 Rlaquo; 一 Rnot; & shy 
到 Rreg; - Bmacr; 四 Bdeg; 
主 & plusmn; & sup2; Bsup3; 
My Racutes 和 Bmicro; &-quot; 
&lt; > R&gt; 
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2. Style 属性 


Style 属性 用 于 改变 HTML 元 素 的 样式 。 它 提供 了 一 种 改变 所 有 HTML 元 素 样式 
的 通用 方法 。 样 式 是 HTML4 引入 的 , 它 是 一 种 新 的 首选 的 改变 HTML 元 素 样式 的 方 
式 。 修 改 HTML 样式 ,可 通过 使 用 Style 属性 直接 将 样式 添加 到 HTML 元 素 ,或 者 间接 
地 在 独立 的 样式 表 中 (CSS 文件 ) 进 行 定义 。 

在 HTML4 中 ,有 若干 的 标签 和 属性 是 被 废弃 的 。 被 废弃 (Deprecated) 的 意思 是 在 
未 来 版 本 的 HTML 和 XHTML 中 将 不 支持 这 些 标签 和 属性 。 避 免 使 用 的 被 废弃 的 标 
签 和 属性 如 表 1. 3 所 示 。 


表 1.3 避免 使 用 的 被 废弃 的 标签 和 属性 





























标 签 描述 属 性 描 述 
center> 定义 居中 的 内 容 align 定义 文本 的 对 齐 方 式 
一 font 二 和 二 basefont 二 | 定义 HTML 字体 bgcolor 定义 背景 颜色 
二 s 这 和 二 strike> 定义 删除 线 文 本 color 定义 文本 颜色 
<u> 定义 下 画 线 文本 

J 〇 背景 颜色 。 


background-color 属性 为 元 素 定 义 了 背景 颜色 。 
例 1-3-1-27 设置 背景 样式 的 示例 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body style= "background- color:yellow"> 
<h2 style= "background- color:red"> This is a heading< /h2> 
<P style= "background- color:green"> This is a paragraph.< /p> 
< /body> 
</html> 


浏览 器 显示 如 图 1. 35 所 示 。 

@ 字体 .颜色 和 属性 。 

font-family、color 以 及 font-size 属性 分 别 定义 元 素 中 文本 的 字体 系列 .颜色 和 字体 
上 

例 1-3-1-28 设置 字体 、 前 景色 和 字号 的 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 


36 Nsniissnns 





<hl style= "font- family:verdana"> A heading< /hl> 
<p style= "font- family:arial;color:red; font— size:20px;">A paragraph.< /p> 
< /body> 
</htm> 


浏览 器 显示 如 图 1. 36 所 示 。 





€ Ollocalhost34734 加 |CG| » 三 € © localhost34734 加 CC » 三 
加 火 地 官方 站 点 园 最 党 访问 。 » 中 移动 设备 上 的 书签 辐 火 殊 官 方 站 点 园 最 军 访 问 。 » 移动 设备 上 的 书签 
A heading | 
Thisisaparagraph. | - 
A paragraph. 
1.35 例 1-3-1-27 的 浏览 器 显示 图 1.36 例 1-3-1-28 的 浏览 器 显示 
@ 文本 对 齐 。 


text-align 属性 规定 了 元 素 中 文本 的 水 平 对 齐 方式 。 
例 1-3-1-29 文本 对 齐 示例 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 
<hl style= "text- align:center"> This is a heading< /hl> 
<p> The heading above is aligned to the center of this page.< /p> 
</body> 
</html> 


浏览 器 显示 如 图 1. 37 所 示 。 


所 Ojlocalhost347: 辐 品 | CIIQ 天 志 
辐 火狐 官方 站 点 图 最 党 访问 辐 火狐 官方 站 点 





This is a heading 





The heading above is aligned to the center of this page. 





图 1.37 例 1-3-1-29 的 浏览 器 显示 
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132 上 机 实验 样 例 


1. 任意 位 置 的 超 链接 


超 链接 分 为 站 内 和 站 外 两 种 情况 。 站 内 又 分 为 同一 网 页 和 不 同 网 页 两 种 情形 。 同 
一 网 页 内 的 跳 转 需要 给 出 锚 点 标签 的 ID 或 NAME。 不 同 网 页 可 能 处 于 相同 目录 或 不 同 
目录 。 对 于 不 同 目 录 , 需 要 回 退 到 不 同 目 录 的 公共 目录 ,而 后 转 入 另 一 个 目录 的 目标 网 
页 甚至 锚 点 元 素 ID 或 NAME。 回 退 用 ../ 来 实现 。 站 外 需要 给 出 协议 、 域 名、 路 径 、 网 页 
以 及 目标 标签 ID 或 NAME 信息 。 下 面 的 实验 演示 任意 位 置 的 超 链 接 。 实 验 步骤 如 下 。 

(1) 添加 “1-3-2-1- 超 链接 ”目录 

在 资源 管理 器 中 添加 “1-3-2-1- 超 链接 ”目录 ,如 图 1. 38 所 示 。 


图 加 -个 县“ 天 本 序 ， 实 验 搜索 实验 


修改 日 期 
2017/1/6 5:57 文件 夹 














图 1.38 超 链接 目录 


(2) 启动 Visual Studio 2010 
(3) 打开 网 站 “1-3-2-1- 超 链接 ” 
打开 网 站 “1-3-2-1- 超 链接 ”, 如 图 1. 39 所 示 。 


File System 


Select the folder you want to open. 











Folder: 
FF\ 教 学 文档 \ 自 编 教材 \HTML5 实 用 网 页 设计 技术 \ 源 程序 \ 实 验 \1-3-2-1- 超 链接 

















Open 




















1.39 ”打开 网 站 “1-3-2-1- 超 链接 ” 
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打开 超 链接 的 窗口 如 图 1.40 所 示 。 

















Command Win 


> 
ee Window 3 solution Explorer EE 





图 1.40 成 功 打 开 网 站 “1-3-2-1- 超 链接 ” 


(4) 添加 站 内 文件 夹 


鼠标 指向 网 站 “1-3-2-1- 超 链接 ”, 右 击 弹出 如 图 1. 41 所 示 的 快捷 菜单 。 选 择 New 


Folder, 根 据 需 要 添加 站 内 文件 夹 , 如 图 1. 42 所 示 。 





Solution Explorer 






夺 FM-37 画 


加 


国 
辣 


回 Command Window 加 Solution Expld 


[ 


国生 已 X 吕 昌 > 避 回 万 


Sulslom 


岂 solution '1-3-2-1- 超 链接 (1 project) 


uild Web Site 
Publish Web Site 





加 Add New ktem.. 


Add Existing Item... 
New Folder 

Add ASP.NET Folder 

Add Reference… 

Add Web Reference... 

Add Service Reference... 

View class Diagram 

Copy Web Site... 

Start Options-- 

Set as StartUp Project 

View in Browser 

Browse With 

Refresh Folder 

Add Solution to Source Control- 
Cut 

Copy 

Paste 

Remove 

Open Folder in Windows Explorer 
Properties Window 

Property Pages 

Run Code Analysis on Web Site 


1.41 网 站 快捷 菜单 


Shift+F6 


Ctrl+Shift+A 
Shift+Alt+A 
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同 solution '1-3-2-1- 超 链接 ' (1 project) 
4 部 FA\-\1-3-2-1- 超 链接 \ 
.1 
4 国 1-1 
1-1-1 
向 1-2 
回 2 














Command Window 本 Solution Explorer EE 





图 1.42 添加 文件 夹 完成 后 的 资源 浏览 器 


(5) 添加 网 页 Master. htm 和 1-1-1-1-Page. htm 
按 图 1. 43 所 示 ,将 Master. htm 和 1-1-1-1-Page. htm 添加 到 解决 方案 中 。 





BI | -| [pebu -| 鸭 ; 
:= xHrm 1.0 Transitc -SG ; 
/1-1/1-1-1/1-1-1-1-Page.htm x 
Client Objects & Events -| (No Events) -al lle 
1DOCTYPE htnl PUBLIC “-//W3C//DTD XHTML 1.0 导轨 Solution "1-3-2-1- 超 链接 ' (1 project) 
4 罗 F\-_\1-3-2-1- 超 链接 \ 


























日 <html xmlns="http://www. w3, org/1999/xhtml”> 


v a 访 1 
Danay 
10% ~« > » 
BG Design | Split [@ Source “和 
9 ce 国 1-1-1-1-Page.htm 
岛 1-2 
> 回 2 


国 Masterhtm 


FE 加 Command Window 吧 Solution Explorer 


图 1.43 添加 两 个 htm 类 型 文件 完成 后 的 资源 浏览 器 
(6) 编辑 网 页 Master. htm 


<html xmlns= "http://www-w3.org/1999/xhtml"> 
<head><title> 实 验 1-3-2-1- 超 链接 < /title>< /head> 
<body> 


<p><a href 全 "1/1-1/1-1-1/1-1-1-1-Page.htm"> 站 内 链接 -不 同 网 页 < /a> 


</p> 
<p><a href= "http://www.w3school.com.cn"> 站 外 链接 -万 维 网 页 面 链接 < /a> 
</p> 


<p><a href= 叶 C4"> 站 内 链接 -同一 网 页 -查看 Chapter 4。</a>< /p> 
<h2> Chapter 1< /h2> <p> This chapter explains ba bla bla< /p> 
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<h2> Chapter 2< /h2> <p> This chapter explains ba bla bla< /p> 
<h2> Chapter 3< /h2> <p> This chapter explains ba bla bla< /p> 
<h2><a name= "C4"> Chapter 4< /a> < /h2><p> This chapter explains ba bla bla< /p> 
<h2> Chapter 5< /h2><p> This chapter explains ba bla bla< /p> 
<h2> Chapter 6< /h2> <p> This chapter explains ba bla bla< /p> 
<h2> Chapter 7< /h2><p> This chapter explains ba bla bla< /p> 
< /body> 
</html> 


(7) 编辑 网 页 1-1-1-1-Page. htm 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title> 站 内 链接 -不 同 网 页 < /title> 
< /head> 
<body> 
<a href="../../../Master.htm"> 返 回 主页 < /a> 
< /body> 
</htm> 


说 明 : 出 现 .../ 一 次 ,返回 到 上 级 目录 一 次 。 例 如 ,当前 文件 1-1-1-1-Page. htm, 其 目 
录 为 "1-3-2-1- 超 链接 /1/1-1/1-1-1"。 对 于 "../../../Master. htm" 从 左 向 右 的 第 一 
个 "../", 返 回 到 "1-3-2-1- 超 链接 /1/1-1" ;第 2 个 "../../", 返 回 到 1-3-2-1- 超 链接 /1; 第 3 
个 "../../../", 返 回 到 “1-3-2-1- 超 链接 ”,Mater. htm 在 “1-3-2-1- 超 链接 ”目录 下 。 

(8) 浏览 网 页 Master. htm 

在 如 图 1. 44 所 示 的 主页 面 中 , 单 击 “ 站 内 链接 -不 同 网 页 ”, 则 打开 图 1. 45 所 示 的 页 
面 。 在 如 图 1. 44 所 示 的 主页 面 单 击 “ 站 外 链接 -万 维 网 页 面 链接 ”, 则 打开 图 1. 46 所 示 的 
页 面 。 在 如 图 1. 44 所 示 的 主页 面 中 单 击 “ 站 内 链接 -同一 网 页 -查看 Chapter 4”, 则 打开 
图 1.47 所 示 的 页 面 。 


€ | Djlocalhost61: 国 跟 | ec ||QBE<Cwik> | 2 三 
回 多 官方 站 点 图 景 党 访问 回 火狐 言 方 站 点 » 口 移动 设备 上 的 书 答 





Chapter 1 





1.44 主页 面 








(4JO eahostele 回 巾 | C ||Q Bec | > 





辐 官方 站 点 加 最 党 访问 加 火狐 官方 站 点 » 中 移动 设备 上 的 书签 








图 1.45 站 内 链接 到 不 同 网 页 


(€)© wwww3scho 于 跟 | C ||Q SEE-<cmrk> 2 | 三 


司 炎 雪 官方 站 点 贺 最 第 访问 加 火 弧 官方 站 点 > 口 移 动 设 备 上 的 书签 





~ 


A ODO 


HTML /CSS JavaScript Server Sid 








www.w3school.com.cn/index.html 


1.46 站 外 链接 到 W3school 


(€) jlocalhost61: 加 器 | C ||Q SEE<cmrk> | 3 
回 XI 祝 方 站 点 加 最 党 沪 问 园 炎 3W 定 方 站 点 ，” 口 称 动 设备 上 的 书签 
Chapter 4 和 





This chapter explains ba bla bla 


Chapter 5 


This chapter explains ba bla bla 





1.47 站 内 链接 到 同一 网 页 不 同 元 素 


2. 任意 源 的 图 像 


图 片 源 有 站 内 和 站 外 两 种 情况 。 站 内 又 分 为 相同 目录 和 不 同 目录 。 相 同 目录 指 图 
像 文件 与 图 像 标 签 所 在 的 网 页 文档 处 于 同一 个 目录 下 。 不 同 目录 指 图 像 文件 与 图 像 标 
签 所 在 的 网 页 文档 分 处 于 不 同 目录 。 以 图 像 标签 所 在 的 网 页 文档 为 参照 ,不 同 目录 分 三 
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种 情况 。 一 是 图 片 文件 在 某 一 目录 中 ,但 图 片 文件 的 某 层 上 级 目录 与 网 页 文档 在 同一 层 
目录 。 二 是 图 片 文件 在 网 页 文档 的 某 层 上 级 目录 中 。 三 是 图 片 文件 既 不 在 网 页 文档 的 
上 级 目录 也 不 在 网 页 文档 本 级 的 某 层 下 级 目录 。 实 验 所 用 的 网 站 目录 结构 如 图 1. 48 
所 示 。 











= 可 = Er TETEE -| 





Solution Explorer 
sla 
同 Solution '1-3-2-2- 任 章 源 的 图 像 ' (1 project) 
4。 邯 FN1-3-2-2- 任 总 源 的 图 像 \ 
a 访 1 
4 1-1 
4 1-1-1 
国 3jpg 
国 2jpg 
国 4jpg 
国 Master.htm 
.BB2 
国 0jpg 
国 tjpg 
网 Solution Explorer 





1.48 任意 源 的 图 像 资源 管理 器 


(1) 源 程序 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 


<head> 
<title> 实 验 1- 3-2- 2- 任 意 源 的 图 像 < /title> 
< /head> 
<body> 
<table> 
<tr> 
<td> 站 内 同 级 图 片 <img src= "4.jpg" alt=""/>< /td> 
<td> 站 内 下 级 图 片 <img src="1-1/2.jpg" alt=""/>< /td> 
<td> 站 内 下 级 图 片 <img src="1-1/1-1-1/3.jpg" alt=""/></td> 
</tr> 
<tr> 
<td> 站 内 上 级 图 片 <img src="../1.jpg" alt=""/>< /td> 
<td> 站 内 不 同 级 图 片 <img src="../2/0.jpg" alt=""/>< /td> 
<td> 站 外 图 片 <img src= "http://www.w3school.com-cn/i/eg 
buttonnext .gif" alt=""/>< /td> 
</tr> 
</table> 
< /body> 


</html> 


OO HTML 基础 
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(2) 浏览 器 显示 
浏览 器 显示 结果 如 图 1. 49 所 示 。 


所 | DO | localhost2899/1-3-2-2- 人 SS8 医 v 国 器 | C |QSE-crrt> | 个 | 自 及 全 多 
司 *W 启 方 站 点 加 景 党 访问 加 火狐 计 方 站 点 莉 新 手 上 路 加 第 用 网 址 四 京东 商城 图 火狐 主页 器 第 用 网 址 





1.49 任意 源 的 图 像 实验 浏览 器 浏览 的 结果 


14 实验 任务 


1. 实验 题目 
HTML 任意 源 的 图 像 和 任意 位 置 的 超 链 接 集成 演示 。 
2. 实现 功能 





综合 利用 所 学 的 标签 ,利用 网 页 展示 1. 3 节 的 内 容 。 提 交 电子 文档 ,一 个 学 生 一 


目录 ,目录 名 称 为 "1-4- 学 号 后 三 位 十 姓名 ”。 


3. 实验 类 型 

综合 设计 。 

4. 实验 要 求 

利用 Table 整合 1.3.1 和 1.3.2。 

使 用 H1 一 H3 标签 。 

body 要 有 背景 图 片 。 

不 同 逻 辑 的 td, 运 用 不 同 的 背景 色 或 图 片 。 

至 少 3 个 HTML 文档 ,1 个 索引 文档 或 主 文档 , 另 2 个 为 链接 和 图 像 。 
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5. 实验 环境 


(1) 计算 机 : PC 内存 8GB、 主 频 1.8GHz 及 以 上 、 硬 盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010 或 Adobe Dreamweaver。 

(4) 浏览 器 : IE8 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 


6. 实验 原理 


(1) 给 出 不 同位 置 的 URL。 
(2) 给 出 站 内 目录 结构 。 


7. 源 代码 


(1) 辅 以 必要 的 注释 。 
(2) 错落 有 致 ,结构 清晰 , 易 读 性 强 。 


8. 遇 到 的 问题 及 解决 办 法 


(1) 字数 300 字 以 上 。 
(2) 语言 简洁 扼要 ,条 理 清楚 。 


图 知识 目标 

。 掌握 表单 的 基本 属性 及 其 与 Web 服务 器 的 交互 方法 
。 掌握 INPUT 标签 9 种 类 型 的 用 法 

。 理解 数据 .结构 和 样式 分 离 的 原因 

。 掌握 CSS 的 3 种 用 法 

。 掌握 CSS 选择 器 的 用 法 

。 掌握 CSS 的 定位 方式 

图 能 力 目标 

。 能 够 根据 实际 需求 恰当 设置 表单 属性 

。 能 够 根据 实际 应 用 准确 选用 INPUT 类 型 
。 能 够 应 用 外 部 样式 分 离 结构 和 样式 

。 能 够 运用 CSS 灵活 设置 标签 的 样式 

。 恰当 运用 定位 设计 界面 

国 素质 目标 

。 设计 精美 .精致 的 网 页 

。 从 通信 的 视角 看 待 浏览 器 与 服务 器 

。 结构 样式、 行为 与 内 容 的 良好 分 离 


图 教学 重点 

。 表单 的 基本 属性 (id、action、method、runat) 

。 input 的 9 种 类 型 和 基本 属性 (id、type、name、value、size、maxlength) 
。 表单 与 ASP. NET 服务 器 进行 交互 

。 样式 的 基本 用 法 、 崇 套 、 重 复 与 冲突 

。 人 金 子 模型 

。 菜单 

国 教学 难点 

。 识别 浏览 器 端 程序 和 服务 器 端 程序 的 运行 错误 
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图 建议 学 时 
。 理论 : 6 学 时 
。 实验 : 6 学 时 


21 大 单 


HTML 表单 用 于 搜集 不 同类 型 的 用 户 输入 ,将 搜集 到 的 数据 和 动作 请 求 传 给 服务 
器 ,服务 器 根据 不 同 的 数据 和 请 求 进行 不 同 的 处 理 , 保 存 处 理 结果 并 向 浏览 器 发 回响 应 。 
它 是 浏览 器 和 服务 器 进行 交互 的 桥梁 。 

去 form> 元 素 定 义 HTML 表单 ,不 在 浏览 器 中 显示 。 按 表单 元 素 的 填写 方式 将 表 
单 分 为 输入 类 控件 和 列表 类 控件 。 输 入 类 控件 一 般 以 input 标记 开始 ,说 明 这 一 表单 元 
素 需 要 用 户 的 输入 ;列表 类 以 select 开始 ,表示 用 户 需 要 选择 。 


1. 一 input 过 元 素 


< 一 input 过 元 素 是 最 重要 的 表单 元 素 , 服 务 器 根据 name 属性 来 识别 一 个 表单 内 的 
到 input 过 元素 。 志 input 之 元 素 有 很 多 形态 ,包括 文本 框 、 密 码 框 、 复 选 框 . 单 选 按钮 、 提 
交 按 钮 等 ,由 type 属性 的 实际 枚 举 值 确定 ,如 表 2. 1 所 示 。 


表 2.1 type 枚 举 值 说 明 





























type 值 说 明 type 值 说 明 
text 文本 字段 submit 提交 按钮 
pid te reset 重 置 按钮 
radio 单 选 按钮 hidden 隐藏 域 
checkbox 复 选 框 file 文件 域 
button 普通 按钮 


size 属性 规定 以 字符 数 计 的 输入 字段 宽度 。maxlength 属性 规定 输入 字段 的 最 大 长 
度 , 以 字符 个 数 计 。value 属性 为 input 元 素 设 定 值 。 对 于 不 同 的 输入 类 型 ,value 属性 的 
用 法 也 不 同 , 具 体 如 下 : 

@ type 王 "button""reset""submit"”: 定义 按钮 上 的 显示 的 文本 。 

@ type 二 "text""password""hidden”: 定义 输入 字段 的 初始 值 。 

@ type 王 "checkbox""radio""image": 定义 与 输入 相关 联 的 值 。 

过 input type 一 "checkbox" 二 和 二 input type 一 "radio" 过 中 必须 设置 value 属性 。 而 
value 属性 无 法 与 二 input type= "file" 二 一 同 使 用 。 

(1) 文本 框 

文本 框 只 能 输入 单行 文本 ,如 需要 输入 多 行 , 则 需要 使 用 textarea 元 素 。 

例 2-1-1-1 一 个 文本 框 应 用 示例 。 


Os #45 cs 
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<html xmlns= "http://www.w3.0rg/1999/zxhtml"> 
<head> 
<title> 例 2- 1- INPUT- TEXT< /title> 








< /head> 
<body> 
身份 证 号 <input type= "text" name= "PID" value="" size= "20" maxlength= "18"/> 
< /body> 
</html> 身份 证 中 ] 
浏览 器 显示 如 图 2. 1 所 示 。 图 2.1 例 2-LL-1 的 浏览 器 显示 
(2) 密码 域 


例 2-1-1-2 一 个 密码 域 应 用 示例 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title> 例 2- 2- INPUT- PASSWORD< /title> 
< /head> 
<body> 
密码 < input type= "password" name= "PWD" value="" size="30" maxlength= 
wg" 
< /body> 
</htm> 


在 浏览 器 的 密码 域 中 输入 ”1234567”, 显 示 如 图 2.2 所 示 。 
(3) 单 选 
例 2-1-1-3 一 个 单 选 框 应 用 示例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title> 例 2- 3- INPUT- RADIO< /title> 
</head> 
<body> 
<pre> 性 别 :< input type= "radio" name= "sex" value= "M" checked= 
"checked" /> 男 < input type= "radio" name= "sex" value="F"/> 女 < /pre> 
< /body> 
</htm> 


浏览 器 显示 如 图 2. 3 所 示 。 











密码 seeeeee| 性 别 ， @ 男 O 〇 女 
2.2 例 2-1-1-2 的 浏览 器 显示 2.3 例 2-1-1-3 的 浏览 器 显示 


说 明 : 默认 值 选中 * 男 ?由 checked 属性 设置 ,可 根据 实际 改变 选择 。 而 且 各 个 单 选 


按钮 的 name 属性 值 一 定 要 相同 。 
(4) 复 选 
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例 2-1-1-4 一 个 复 选 框 应 用 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title> 例 2- 4- INPUT- CHECKBOX< /title> 
< /head> 
<body> 
<p> 请 选择 你 的 爱好 :< /p> 
<p> 
< input type= "checkbox" name= "testl" value="Al" checked= "checked"/> 上 网 
< input type= "checkbox" name= "text2" value= "A2"/> 游 泳 
< input type= "checkbox" name= "test3" value= "A3"/> 登 山 
< input type= "checkbox" name= "test4" value= "A4"/> 写 作 
</p> 
< /body> 
</html> 


浏览 器 显示 如 图 2.4 所 示 。 

说 明 : 默认 选项 * 上 网 "由 checked 属性 设置 ， 
可 根据 实际 改变 选择 。 而 且 各 个 复 选 按钮 的 name 
属性 值 需要 各 不 相同 。 


请 选择 你 的 爱好 : 
加 上 网 口 游泳 口 登山 口 写作 
图 2.4 例 2-1-1-4 的 浏览 器 显示 
































(5) 按钮 

按钮 有 3 类 , 即 提交 按钮 .普通 按钮 和 重 置 按钮 ,一 个 表单 中 有 且 仅 有 一 个 提交 按 
钮 ,用 于 触发 表单 动作 。 重 置 按钮 用 于 清除 表单 中 的 所 有 数据 。 普 通 按钮 在 一 个 表单 中 
可 有 可 无 .可 多 可 少 ,根据 实际 选择 。 普 通 按钮 须 用 脚本 方法 名 设置 onclick 属性 值 。 

例 2-1-1-5 一 个 按钮 应 用 示例 。 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title> 例 2- 5- INPUT- 按 钮 < /title> 
</head> 
<body> 
<h5> 三 类 按钮 :< /h5> 
<P> 
<input name= "buttonl" type= "submit" value= "提交 "/> 
<input name= "button2" type= "reset" value=" 重 置 "/> 
< input name= "button3" type= "button" value= "普通 按钮 "/> 





</p> 
< /body> 
nl 三 类 过 租 : 
浏览 器 显示 如 图 2. 5 所 示 。 提交 | | 时 本 | | 关 B 扩 组 























2.5 例 2-1-1-5 的 浏览 器 显示 
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(6) 隐藏 域 

隐藏 域 主要 用 来 传递 一 些 参 数 , 而 这 些 参 数 不 需 要 在 页 面 中 显示 。 当 浏览 者 提交 表 
单 时 ,隐藏 域 的 内 容 会 一 起 提交 给 处 理 程序 。 

例 2-1-1-6 一 个 隐藏 域 应 用 示例 。 


<html> 
<head><title> 例 2- 6- 隐 藏 域 和 action 属性 对 比 示例 < /title>< /head> 
<body> 
< form name= "exam5" action=" 例 2- 06- INPUT- 隐藏 域 的 examl .html" 
method= "get"> 
下 面 是 几 种 不 同属 性 的 文本 字段 : 
<pP> 姓 名 :< input type= "text" name= "username" sjize= "15" />< /p> 
<p> 年 龄 :< input type= "text" name= "age" size= "15" maxlength= "3"/>< /p> 
<p>< input type= "hidden" name= "page jd" value= "example"/> 
< input type="submit" name= "Submit" value= "提交 "/>< /p> 
< /form 
< /body> 
</html> 


浏览 器 显示 如 图 2.6 所 示 。 

(7) 文件 域 

文件 域 用 于 浏览 选择 需要 上 传 的 文件 。 
例 2-1-1-7 一 个 文件 域 应 用 示例 。 

















<html> 
<head><title> 例 2-7- 文 件 域 < /title>< /head> 
<body> 
< form action= "mailto:fast@ 126.com" name= "research" method= "post"> 
下 面 是 某 网 站 的 注册 页 面 : 
<p> 用 户 名 :< input name= "username" type= "text" size="20"/>< /p> 
< 户 密码 : 
< input name= "passwordl" type= "password" size="20"/> 
</p> 
<p> 请 上 传 你 的 头像 :< input type= "file" name= "picture"/>< /p> 
</form> 
< /body> 
</htm> 
浏览 器 显示 如 图 2.7 所 示 。 
下 面 是 几 种 不 同属 性 的 文本 字段 : 下 面 是 某 网 站 的 注册 页 面 : 
姓名 : 用 户 名 : 
年 龄 : | 宰 码 
请 上 传 你 的 头像 : | 浏览 .。| 未 选择 文件 . 











2.6 例 2-1-1-6 的 浏览 器 显示 2.7 例 2-1-1-7 的 浏览 器 显示 
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单 击 “ 浏 览 ” 按 钮 ,打开 “文件 上 传 ” 对 话 框 ,如 图 2.8 所 示 。 
































图 2.8 “文件 上 传 " 对 话 框 


在 图 2.8 中 选中 一 个 文件 ,浏览 器 显示 如 图 2.9 所 示 。 
2. 列表 元 素 下 面 是 某 网 站 的 注册 页 面 : 


所 有 主流 浏览 器 都 支持 二 select 二 标签 。select 元 a 一 
素 可 创建 单 选 或 多 选 菜单 。 一 select 之 元 素 中 的 “可 到 | 

















一 option 二 标签 用 于 定义 列表 中 的 可 用 选项 。 请 上 传 你 的 头像 : | 浏览 。] oz-3.of 
例 2-1-1-8 一 个 列表 应 用 示例 。 2.9 例 2-1-1-7 的 浏览 器 显示 
<html> 

<head><title> 例 2- 8- select< /title>< /head> 
<body> 
<p> 证 件 类 型 


<select name= "cardtype"> 
<option value= "id card"> 身 份 证 < /option> 
<option value= "stu card"> 学 生 证 < /option> 
<option value="drive card"> 驾 驶 证 < /option> 
<option value= "other card"> 其 他 证 件 < /option> 
</select> 
</p> 
<p> 关 心 的 栏目 
< select name= "content" size="3" multiple= "multiple"> 
<option value= "ml"> 体 育 栏 目 < /option> 
<option value= "m2"> 科 技 栏目 < /option> 
<option value= "m3"> 新 闻 栏 目 < /option> 
<option value= "m4"> 汽 车 栏目 < /option> 
<option value= "m5"> 房 产 栏目 < /option> 
</select> 
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</p> 
< /body> 
</html> 
浏览 器 显示 如 图 2. 10 所 示 。 
说 明 : 下 拉 列 表 中 的 size 属性 值 指明 列表 中 显示 选项 数 ,multiple 指明 多 选 ,默认 为 
单 选 。 当 select 元 素 中 给 出 multiple 属性 时 , 按 住 Ctrl 键 进行 多 选 , 一 个 选中 2 个 栏目 
的 浏览 器 显示 如 图 2. 11 所 示 。 























证 件 类 型 驾驶 证 v| 证 件 类 型 | 身份 证 v| 
新 闻 栏目 ^ 体育 栏目 因 
汽车 栏目 并 科技 栏目 国 
关心 的 栏目 | 房产 栏目 x 关心 的 栏目 国 BE 引 | 、 
图 2.10 例 2-1-1-8 的 浏览 器 显示 图 2.11 例 2-1-1-8 中 下 拉 列 表 多 选 的 浏览 器 显示 


3. textarea 元 素 


到 textarea> 标签 定义 多 行 的 文本 输入 控件 。 文 本 区 中 可 容纳 无 限 数量 的 文本 ,其 
中 文本 的 默认 字体 是 等 宽 字体 (通常 是 Courier)。 可 以 通过 cols 和 rows 属性 来 规定 
textarea 的 尺寸 ,不 过 更 好 的 办 法 是 使 用 CSS 的 height 和 width 属性 。 文 本 输入 区 内 的 
文本 行 间 用 "%OD%OA" ( 回 车 /换行 ) 进 行 分 隔 。 使 用 二 textarea 二 标签 的 wrap 属性 
设置 文本 输入 区 内 的 换行 模式 。 

例 2-1-1-9 一 个 textarea 元 素 应 用 示例 。 


<html> 

<head><title> 例 2- 9- textarea< /title>< /head> 

<body> 

您 的 意见 对 我 很 重要 
< textarea name= "info" cols= "35" rows="7"> 请 将 意见 输入 此 区 域 
< /textarea> 

< /body> 

</htm> 


浏览 器 显示 如 图 2. 12 所 示 。 





色 


| 请 将 意见 输入 此 区 域 








您 的 意见 对 我 很 重要 | 
2.12 例 2-1-1-9 的 浏览 器 显示 
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4. form 表单 与 ASP. NET 服务 器 互动 


表单 用 于 向 服务 器 提交 处 理 请 求 。 用 户 填 写 完 信 息 后 做 提交 操作 ,将 表单 内 容 从 客 
户 端 的 浏览 器 传送 到 服务 器 上 ,经 过 服务 器 处 理 程序 后 ,再 将 用 户 所 需 信 息 送 回 客户 端 
的 浏览 器 上 ,这 样 网 页 就 具有 了 交互 性 。action 属性 定义 提交 表单 时 执行 的 动作 。 向 服 
务 器 提交 表单 的 通常 做 法 是 使 用 提交 按钮 。 通 常 表单 会 被 提交 到 Web 服务 器 的 网 
页 中 。 

表单 和 Web 服务 器 的 HTTP 通信 方式 由 method 属性 设置 ,有 get 和 post 两 种 方 
法 ,两 种 方法 的 区 别 如 下 。 

(1) 传输 格式 

GET 请 求 ,请 求 的 数据 会 附加 在 URL 之 后 ,以 ?分 割 URL 和 传输 数据 ,多 个 参数 用 
&&. 连接 。URL 的 编码 格式 采用 ASCII 编码 ,而 不 是 unicode, 即 所 有 的 非 ASCII 字符 都 
要 编码 之 后 再 传输 。 

POST 请 求 会 把 请 求 的 数据 放置 在 HTTP 请 求 包 的 包 体 中 。 上 面 的 item 三 
bandsaw 就 是 实际 的 传输 数据 。 因 此 ,GET 请 求 的 数据 会 暴露 在 地 址 栏 中 ,而 POST 请 
求 则 不 会 。 

(2) 传输 数据 规模 

HTTP 规范 中 没有 对 URL 的 长 度 和 传输 的 数据 大 小 进行 限制 。 但 是 在 实际 开发 过 
程 中 ,对 于 GET ,特定 的 浏览 器 和 服务 器 对 URL 的 长 度 有 限制 。 因 此 ,在 使 用 GET 请 
求 时 ,传输 数据 会 受到 URL 长 度 的 限制 。 

对 于 POST, 由 于 不 是 URL 传 值 ,理论 上 是 不 会 受 限制 的 ,但 实际 上 各 个 服务 器 对 
POST 提交 数据 大 小 是 有 限制 的 ,Apache IIS 都 有 各 自 的 配置 。 

(3) 安全 性 

POST 的 安全 性 比 GET 的 高 。 这 里 的 安全 是 指 真 正 的 安全 ,而 不 同 于 上 面 GET 提 
到 的 安全 方法 中 的 安全 ,上 面 提 到 的 安全 仅仅 是 不 修改 服务 器 的 数据 。 比 如 ,在 进行 登 
录 操 作 时 ,通过 GET 请 求 ,用 户 名 和 密码 都 会 暴露 在 URL 上 ,因为 登录 页 面 有 可 能 被 浏 
览 器 缓存 以 及 其 他 人 查看 浏览 器 的 历史 记录 的 原因 ,此 时 的 用 户 名 和 密码 就 很 容易 被 他 
人 拿 到 。 除 此 之 外 ,GET 请 求 提 交 的 数据 还 可 能 造成 跨 站 请 求 伪造 攻击 。 

(4) 运行 协议 

HTTP 中 的 GET、POST、SOAP 协议 都 是 在 HTTP 上 运行 。 

表单 间 不 能 嵌 套 使 用 。 表 单 能 够 包含 input 元 素 , 比 如 文本 字段 、 复 选 框 . 单 选 框 、 提 
交 按 钮 等 ,还 可 以 包含 select\,menus ,textarea \fieldset legend 和 label 元 素 。form 元 素 
是 块 级 元 素 ,前 后 会 产生 折 行 。 所 有 浏览 器 都 支持 form 标签 。 

如 果 表 单 中 的 input label select ,textarea fieldset ,legend 元 素 需 要 被 服务 器 端的 
后 台 C# 或 VB 应 用 程序 处 理 , 不 但 表单 元 素 需 要 给 出 runat 属性 值 为 server, 而 且 被 读 
写 的 input、 label、 select、 textarea, fieldset、 legend 元 素 也 需要 给 出 runat 属性 值 为 
server。 同 时 ,所 有 需要 被 服务 器 处 理 的 元 素 必须 给 出 一 个 唯一 的 id 属性 值 。 

get 通信 方式 的 实例 将 在 DOM 部 分 中 讲述 ,post 通信 方式 的 具体 实例 如 例 2-1-1-10 
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所 示 。 
例 2-1-1-10 ”post 通信 方式 实例 。 
(1) 例 2-1-1-10-form-fieldset. aspx 


<% QPage Language="C#" AutoEventWireup="true" CodeFile=" 例 2- 1- 1- 10- form- fieldset. 
aspx.cs" Inherits=" 理 论 例 2 1 1 10 form fieldset"% > 
< !DOCTYPE html> 
<html xmlns= "http://www-w3.org/1999/xhtml"> 
<head runat= "server"> 
<title>< /title> 
< /head> 
<body> 
< form id= "forml" runat= "server"> 
<div> 
<fieldset> 
<legend> 健 康信 息 < /legend> 
身高 : <input id= 'height' type="text" runat="server" 
value= '170'/> 
体重 : < input id= 'weight' type="text" runat="server" 
value= '65'/> 
< /fieldset> 
<p><input type="submit" value= ' 提 交 '/>< /p> 
<label id= 'inf' runat="server">< /label> 
</div> 
</form> 
< /body> 
</htm> 


(2) 例 2-1-1-10-form-fieldset. aspx. cs 


using System; 
using System.Collections.Generic; 
using System.Linqg; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class 理论 例 2 1 1 10 form fieldset : System.Web.UI.Page 
{ 
protected void Page Load (object sender, EventArgs e) 
i 
this. inf. InnerText=" 身 高 ="+ this.height.Value+"cam,"+" 体 重 ="+ this.weight. 
Value+ "Kg"; 
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(3) 浏览 器 显示 
浏览 器 显示 如 图 2. 13 所 示 。 





厂 健康 信息 
身高 :|170 体重 :|65 ] 





| 提交 | 
身高 =170cm, 体 重 =65Kg 





图 2.13 例 2-1-1-10 的 浏览 器 显示 


说 明 ,默认 身高 和 体重 分 别 为 170cm 和 65kg, 由 input 的 value 属性 设置 。 用 户 在 浏 
览 器 端 修改 后 , 单 击 提交 按钮 , 则 服务 器 端 刷新 网 页 。 此 外 ,对 于 . aspx 格式 文件 ,form 
的 默认 通信 方式 为 post。 如 果 form 没 指明 action, 默 认 的 form 会 自动 设置 action 值 。 
按 F12 键 , 进 入 开发 人 员工 具 界 面 , 如 图 2. 14 所 示 。 


TF | 省 | We Hote ttm WF RW pow BB- 二 扣 疙 





/body> 


html » body » form #form1 » div aspNetHidden » input #_VIEWSTATE 





图 2.14 火狐 开发 人 员工 具 查 看 器 下 的 文档 


22 层叠 样式 玉 -CSS 


HTML 标签 原本 被 设计 为 用 于 定义 文档 内 容 。 通 过 使 用 二 hl 之 一 p 二 二 table 之 这 
样 的 标签 ,HTML 的 初 囊 是 表达 “这 是 标题 “这 是 段落 ”“ 这 是 表格 "之 类 的 信息 。 同 时 
文档 布局 由 浏览 器 来 完成 ,而 不 使 用 任何 的 格式 化 标签 。 

由 于 Netscape 和 Internet Explorer 两 种 主要 的 浏览 器 不 断 地 将 新 的 HTML 标签 和 
属性 (比如 字体 标签 和 颜色 属性 ) 添 加 到 HTML 规范 中 ,创建 文档 内 容 清 晰 地 独立 于 文 
档 表现 层 的 站 点 变 得 越 来 越 困 难 。 标 签 能 够 实现 的 样式 控制 较为 单一 ,单一 的 网 页 控制 
方式 要 求 程 序 员 本 身 的 工作 量 大 量 增加 ,而 专业 的 美工 无 法 在 网 页 设计 阶段 充分 发 挥 所 
长 ,浪费 了 大 量 人 力 .时 间 成 本 。 当 页 面 需 要 改变 样式 时 ,重复 大 量 的 工作 严重 降低 了 程 
序 开发 人 员 的 开发 效率 。 随 着 网 页 设计 技术 的 发 展 ,人 们 已 经 不 满足 原 有 的 一 些 HTML 
标记 ,而 是 希望 能 够 为 页 面 内 容 添 加 一 些 更 加 绚丽 的 属性 ,如 鼠标 标记 、 渐 变 效果 等 。 

为 了 解决 这 个 问题 ,万 维 网 联盟 (W3C) 在 HTML 4.0 之 外 创造 出 样式 (Style) 。 
CSS 技术 的 发 展 使 这 些 成 为 现实 。CSS 是 Cascading Style Sheet 的 缩写 ,可 以 翻译 为 “ 层 
全 样式 表 ” 或 “级 联 样式 表 ”, 即 “样式 表 ”。 把 样式 添加 到 HTML 4.0 中 ,解决 了 内 容 与 
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表现 分 离 的 问题 。 所 有 的 主流 浏览 器 均 支 持 层 芭 样式 表 。 

样式 通常 存储 在 样式 表 中 。 外 部 样式 表 可 以 极 大 地 提高 工作 效率 , 它 通常 存储 在 
CSS 文件 中 。 仅 仅 编辑 一 个 简单 的 CSS 文档, 外 部 样式 表 就 能 同时 改变 站 点 中 所 有 页 面 
的 布局 和 外 观 。 由 于 允许 同时 控制 多 重 页 面 的 样式 和 布局 ,CSS 可 以 称 得 上 是 Web 设 
计 领 域 的 一 个 突破 。 网 站 开发 者 能 够 为 每 个 HTML 元 素 定义 样式 ,并 根据 需要 将 之 应 
用 于 任意 多 的 页 面 中 。 如 需 全 局 更 新 ,只 需 简单 地 改变 样式 ,然后 网 站 中 的 所 有 元 素 均 
会 自动 地 更 新 。 

多 个 样式 定义 可 层 释 为 一 。 样 式 表 允许 以 多 种 方式 规定 样式 信息 。 样 式 可 以 规定 
在 单个 的 HTML 元 素 中 ,如 在 HTML 页 的 头 元 素 中 ,或 在 一 个 外 部 的 CSS 文件 中 。 甚 
至 可 以 在 同一 个 HTML 文档 内 部 引用 多 个 外 部 样式 表 。 

当 同 一 个 HTML 元 素 被 不 止 一 个 样式 定义 时 ,会 使 用 哪个 样式 呢 ? 

一 般 而 言 ,所 有 的 样式 会 根据 下 面 的 规则 层 又 于 一 个 新 的 虚拟 样式 表 中 ,其 中 数字 
大 小 表示 拥有 优先 权 的 高 低 。 

@ 浏览 器 缺 省 设置 。 

@ 外 部 样式 表 。 

@ 内 艇 样式 表 ( 位 于 一 head 标签 内 部 ) 。 

@ 行内 样式 (在 HTML 元 素 内 部 ) 。 

因此 ,行内 样式 (在 HTML 元 素 内 部 ) 拥 有 最 高 的 优先 权 , 这 意味 着 它 将 优先 于 几 个 
样式 声明 : 二 head 二 标签 中 的 样式 声明 .外 部 样式 表 中 的 样式 声明 ,或 者 浏览 器 中 的 样式 
声明 (默认 值 ) 。 


1. CSS 的 优势 


@ 样式 表 为 页 面 提 供 了 丰富 的 美观 元 素 , 使 页 面 更 加 美观 和 灵活 。 

@ 样式 表 可 以 实现 内 容 与 样式 的 分 离 ,方便 团队 协作 开发 ,大 大 提高 了 网 站 开发 
效率 。 

@ 程序 员 与 美工 分 工 非常 明确 ,大 大 减少 了 程序 员 的 工作 量 。 

@ 为 网 站 开发 提供 了 新 的 模式 。 


2. CSS 的 功能 


@ 灵活 控制 网 页 中 文字 的 字体 、 颜 色 、 大 小 .间距 、 风 格 及 位 置 。 

@ 随意 设置 一 个 文本 块 的 行 高 、 缩 进 , 并 可 以 为 其 加 入 三 维 效果 的 边框 。 

@ 更 方便 地 为 网 页 中 的 任何 元 素 设置 不 同 的 背景 颜色 和 背景 图 片 。 

@ 精确 控制 网 页 中 各 元 素 的 位 置 。 

@ 可 以 与 脚本 语言 相 结合 ,使 网 页 中 的 元 素 产 生 各 种 动态 效果 。 

从 CSS 作用 的 区 域 分 为 行内 样式 内 能 样式 和 外 部 样式 。 行 内 样式 由 HTML 标签 
的 Style 属性 设置 ,第 1 章 已 经 介绍 ,行内 样式 作用 于 所 在 单个 标签 。 内 徐 样 式 作 用 于 所 
在 的 单个 HTML 文件 。 外 部 样式 作用 于 所 导入 的 任何 HTML 文档 。 
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221 内 矢 样 式 


内 艇 样式 置 于 head 元 素 里 ,以 二 style type 王 "text/css" 之 二 /style 二 来 书写 。 
二 style 二 标签 用 于 为 HTML 定义 样式 。 其 中 ,type 属性 是 必需 的 ,定义 Style 元 素 的 内 
容 , 其 唯一 值 为 text/css。style 内 包含 选择 器 。 选 择 器 有 标签 选择 器 .类 选择 器 .ID 选择 
器 . 子 代 选择 器 、 包 含 ( 后 代 ) 选 择 器 .通用 选择 器 以 及 最 后 的 伪 类 选择 符 和 分 组 选择 符 。 

style 元 素 的 内 容 由 CSS 规则 构成 。CSS 规则 由 两 个 主要 的 部 分 构成 : 选择 器 以 及 
样式 声明 。 


selector {declarationl; declaration2; ... declarationN } 


选择 器 通常 是 需要 改变 样式 的 一 个 或 一 批 HTML 元 素 。 声 明 置 于 花 括号 内 ,进行 
一 条 或 多 条 样式 的 声明 。 每 条 声明 由 一 个 属性 和 一 个 值 组 成 。 每 个 属性 有 一 个 值 , 属 性 
和 值 用 冒号 分 开 。 声 明之 间 用 分 号 分 隔 。 


selector { propertyl: valuel; property2: value2; *…propertyN: valueN;} 


下 面 这 行 代码 的 作用 是 将 hl 元 素 内 的 文字 颜色 定义 为 红色 ,同时 将 字体 大 小 设置 
为 14 像素 。 在 这 个 例子 中 ,hl 是 选择 器 ,color 和 font-size 是 属性 ,red 和 14px 是 值 。 


hl {color:red; font- size:14px;} 


(1) 颜色 值 

颜色 值 除 了 使 用 英文 单词 ,还 可 以 使 用 十 六 进 制 的 颜色 值 , 可 访问 http://www. 
w3school. com. cn/tags/html_ref_colornames. asp 查阅 颜色 名 值 对 照 表 。 

(2) 多 单词 值 

如 果 值 为 若干 单词 , 则 要 给 值 加 引号 ,例如 p {font-family: "sans serif";)。 

(3) 空格 与 大 小 写 

是 否 包含 空格 不 会 影响 CSS 在 浏览 器 的 工作 效果 ,同样 ,与 XHTML 不 同 ,CSS 对 
大 小 写 不 敏感 。 不 过 存在 一 个 例外 : 如 果 涉 及 与 HTML 文档 一 起 工作 ,class 和 id 名 称 
对 大 小 写 是 敏感 的 。 

(4) 选择 器 分 组 

分 组 的 选择 器 就 可 以 分 享 相 同 的 声明 。 用 逗号 就 能 将 需要 分 组 的 选择 器 分 开 。 

例如 : hl,h2,h3,h4,h5,h6 { color: green; }。 

(5) 子 代 选 择 器 

语法 : 

父 代 名 > 子 代 名 {属性 名 : 属性 值 ;} 

例 2-2-1-1 子 代 选择 器 应 用 示例 1。 


<htm> 
<head> 
<title> 例 2-11-CSS- 多 层级 -父子 < /title> 
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<style type= "text/css"> 
div>div>div>div> div{border:1px dashed Green;} 
div{margin- left:10px;margin- top:10px;border:1px solid red;} 
</style> 
< /head> 
<body> 
<div style= "width:130px;height:130px;"> 
<div style= "width:110px;height:110px;"> 
<div style= "width:90px;height :90px;"> 
<div style= "width:70px;height:70px;"> 
<div style= "width:50px;height:50px;"> 
<div style= "width:30px;height:30px;"> 
<div style= "width:10px;height:10px;"> 


</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
< /body> 


</htm> 


浏览 器 显示 如 图 2. 15 所 示 。 

说 明 ; div 二 div 二 div 二 div 二 div 二 div { border: 1px 
dashed green; } 是 严格 的 父子 关系 ,选择 有 连续 5 对 相 邻 
div 之 间 的 直接 父子 关系 的 第 5 个 div。 满 足 连 续 5 级 父子 
div 关系 选择 条 件 的 有 最 内 层 相 邻 的 3 个 div, 因 而 显示 线 
型 为 虚线 ,颜色 为 绿色 。 其 他 不 满足 连续 5 级 div 父子 关 
系 选择 条 件 的 div 线 型 为 实 线 ,颜色 为 红色 。 父 代 名 和 子 
代 名 可 以 标签 选择 器 .类 选择 器 .ID 选择 器 .属性 选择 器 、 
属性 值 选 择 器 .标签 属 性 选择 器 .标签 属性 值 选择 器 。 图 2.15 例 2-2-1-1 的 浏览 器 显示 

例 2-2-1-2 子 代 选择 器 应 用 示例 2。 





<html> 
<head> 
<title> 例 2- 12-Css- 多 层级 -父子 < /title> 
<style type= "text/css"> 
div>div>div>div>div{border:1px dashed Green;} 
div{margin- left:10px;margin- top:10px;border:1px solid red;} 
</style> 
< /head> 
<body> 
<div style= "width:130px;height:130pzx;"> 
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<div style= "width:110px;height:110px;"> 
<div style= "width:90px;height:90px;"> 
<div style= "width:70px;height:70px;"> 
<div style= "width:50px;height:50px;"> 
<form action=""> 
<div style= "width:30px;height :30px;"> 
<div style= "width:10px;height:10px;"> 


</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div> 
< /body> 
</htm> 


浏览 器 显示 如 图 2. 16 所 示 。 

说 明 : 例 2-2-1-2 与 例 2-2-1-1 的 区 别 是 在 第 5 个 
和 第 6 个 div 之 间 加 了 一 个 form 标签 ,这 样 满足 连续 
5 对 相 邻 div 父子 关系 的 最 内 层 div 只 有 一 个 ,其 他 均 
不 满足 。 因 此 ,只 有 第 5 个 div 线 型 为 虚线 ,颜色 为 绿 
色 , 其 他 div 线 型 为 实 线 ,颜色 为 红色 。 

(6) 后 代 选 择 器 

语法 : 


父 代 名 > 后 代 名 { 属 性 名 : 属性 值 ;} 





2.16 例 2-2-1-2 的 浏览 器 显示 


例如 : div div div div div div { color: green; } 有 5 对 相 邻 div 之 间 的 父 代 与 后 代 


关系 。 
例 2-2-1-3 ”后 代 选 择 器 应 用 示例 1。 


<html> 
<head> 
<title> 例 2-13-CSS- 多 层级 -包含 < /title> 
< style type= "text/css"> 
div div div div div{border:1px dashed Green7} 
div{margin- left:10px;margin- top:10px;border:1px solid red;} 
</style> 
< /head> 
<body> 
<div style= "width:130px;height:130pzx;"> 
<div style= "width:110pxzheight:110pxz"> 
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<div style= "width:90px;height:90px;"> 
<div style= "width:70px;height:70px;"> 
<div style= "width:50px;height:50px;"> 
<div style= "width:30px;height:30px;"> 
<div style= "width:10px;height:10px;"> 


</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
< /body> 


</htm> 


浏览 器 显示 如 图 2. 17 所 示 。 
例 2-2-1-4 后 代 选 择 器 应 用 示例 2。 


<html> 
<head> 
<title> 例 2-14-CSS- 多 层级 -包含 < /title> 
< Style type= "text/css"> 


?2.17 例 2-2-1-3 的 浏览 器 显示 


div {margin - left: 10px; margin - top: 10px; 
border:1px solid red;} 
</style> 
< /head> 
<body> 
<div style= "width:130px;height:130px;"> 
<div style="width:110px;height:110px;"> 
<div style= "width:90px;height :90px;"> 
<div style= "width:70px;height:70px;"> 
<div style= "width:50px;height:50px;"> 
< form action=""> 
<div style= "width:30px;height:30px;"> 


<div style= "width:10px;height:10px;"> 


</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div> 
< /body> 
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</htm> 


浏览 器 显示 如 图 2. 18 所 示 。 

说 明 : 例 2-14 与 例 2-13 的 区 别 是 在 第 5 个 和 第 6 个 
div 之 间 加 了 一 个 form 标签 ,但 两 个 例子 的 浏览 器 显示 相 
同 。 因 为 最 内 层 的 3 个 div 均 满 足 选择 条 件 。 故 第 5 一 7 
个 div 线 型 为 虚线 ,颜色 为 绿色 。 同 样 , 父 代 名 和 后 代 名 可 
以 是 标签 选择 器 、 类 选择 器 、ID 选择 器 、 属 性 选择 器 、 属 性 
值 选择 器 .标签 属性 选择 器 .标签 属性 值 选择 器 。 

(7) 标签 选择 器 

这 是 最 简单 的 选择 器 。 图 2.18 例 2-2-1-4 的 浏览 器 显示 

语法 : 





标签 {样式 } 

如 在 hl 标签 中 让 字体 变 为 红色 ,语句 为 hl{ color:red;} ,前 述 的 样式 例子 也 均 为 标 
签 选 择 。 

(8) ID 选择 器 

id 选择 器 可 以 为 标 有 特定 id 的 HTML 元 素 指定 特定 的 样式 。id 选择 器 以 "# "来 
定 尽 ， 

下 面 两 个 id 选择 器 ,第 一 个 定义 元 素颜 色 为 红色 ,第 二 个 定义 元 素颜 色 为 绿色 。 

#summary {color:red;} 

#content {color:green;} 

下 面 的 HTML 代码 中 ,id 属性 为 summary 的 p 元 素 显 示 为 红色 ,而 id 属性 为 
content 的 p 元 素 显示 为 绿色 。 

<p id= "surmary"> 这 个 段落 是 红色 。< /p> 

<p id= "content"> 这 个 段落 是 绿色 。< /p> 

(9) 类 选择 器 

类 选择 器 以 一 个 点 号 显示 。 


.class_name{ 样 式 规则 } 


body 内 的 HTML 标签 内 使 用 class 二 “class_name”(class_name 是 类 选择 器 名 称 ， 
可 以 用 任意 英文 代替 ,但 不 能 是 汉字 以 及 拼音 ) 引 用 类 的 样式 。 
例如 : 





-hp_center {text— align: center} 


上 面 例子 中 所 有 拥有 hp_center 类 的 HTML 元 素 均 为 居中 。 在 下 面 的 BODY 内 的 
HTML 代码 中 ,hl 和 p 元素 都 有 hp_center 类 。 这 意味 着 两 者 都 将 遵守 . hp_center 选择 
器 中 的 规则 。 
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<hl class= "hp_center"> This heading will be center- aligned< /hl> 
<p class= "hp_center"> This paragraph will also be center-aligned.< /p> 


注意 : 类 名 的 第 一 个 字符 不 能 使 用 数字 ,因为 它 无 法 在 Mozilla 或 Firefox 中 起 作用 。 

(10) 属性 和 值 选择 器 

对 带 有 指定 属性 的 HTML 元 素 设置 样式 。 可 以 为 拥有 指定 属性 的 HTML 元 素 设 
置 样式 ,而 不 仅 限于 class 和 id 属性 。 对 于 IE7 和 IE8, 只 有 设置 !1DOCTYPE 才 支 持 属 
性 选择 器 。 在 IE6 及 更 低 的 版 本 中 不 支持 属性 选择 。 

下 面 的 例子 为 带 有 title 属性 的 所 有 元 素 设置 样式 。 


[title] { color:red;) 

下 面 的 例子 为 title="W3School" 的 所 有 元 素 设置 样式 。 
[title=W3school] { border:5px solid blue; } 

属性 选择 器 在 为 不 带 有 class 或 id 的 表单 设置 样式 时 特别 有 用 。 例 如 : 


input [type= "text"] 
{ 
width:150px; display:block; margin- bottom:10px; 
background- color:yellow; font- family: Verdana, Arial; 
} 
input [type= "button"] 
{ width:120px; margin- left:35px; display:block; font- family: Verdana, Arial; } 


222 创建 样式 


当 读 到 一 个 样式 表 时 ,浏览 器 会 根据 它 来 格式 化 HTML 文档 。 插 入 样式 表 的 方法 
有 3 种 : 外 部 样式 .内 艇 样式 和 行内 样式 。 

(1) 外 部 样式 表 

当 样 式 需要 应 用 于 很 多 页 面 时 ,外 部 样式 表 将 是 合理 的 选择 。 在 使 用 外 部 样式 表 的 
情况 下 ,可 以 通过 改变 一 个 文件 来 改变 相关 网 页 的 外 观 。 每 个 页 面 使 用 二 link 之 标签 链 
接 到 外 部 样式 表 。 二 link 二 标签 在 (文档 的 ) 头 部 ,如 下 所 示 : 





<head>< link rel= "stylesheet" type= "text/css" href= "mystyle.css" />< /head> 


浏览 器 会 从 文件 mystyle. css 中 读 到 样式 声明 ,并 根据 它 来 格式 文档 。 外 部 样式 表 
可 以 在 任何 文本 编辑 器 中 编辑 。 文 件 只 能 包含 样式 选择 器 和 样式 规则 ,不 能 包含 任何 
html 标签 ,也 不 能 包含 任何 JavaScript 程序 。 样 式 表 应 该 以 . css 扩展 名 进行 保存 。 

下 面 是 mystyle. css 样式 表 文 件 的 内 容 : 

hr {color: sienna;} 


p {margin- left: 20px;} 
body {background- image: Url ("images/back40.gif");} 
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不 要 在 属性 值 与 单位 之 间 留 有 空格 。 假 如 使 用 "margin-left: 20 px" 而 不 是 "margin- 
left: 20px", 它 仅 在 IE 6 中 有 效 , 但 是 在 Mozilla/Firefox 或 Netscape 中 却 无 法 正常 
王 作 : 

(2) 内 嵌 样 式 

当 单 个 文档 需要 特殊 的 样式 时 ,应 使 用 内 部 样式 表 。 使 用 二 style 二 标签 在 文档 头 部 
定义 内 部 样式 表 , 例 如 : 


<head> 
<style type= "text/css"> 
hr {color: sienna;} 
p {margin- left: 20px;} 
body {background- image: Url ("images/back40.gif");} 
</style> 
< /head> 


(3) 行内 样式 

行内 样式 将 表现 和 内 容 混杂 在 一 起 ,损失 样式 表 的 许多 优势 。 它 适用 于 当 样 式 仅 需 
要 在 一 个 元 素 上 应 用 一 次 时 。 使 用 行内 样式 ,需要 在 相关 的 标签 内 使 用 style 属性 。 
style 属性 可 以 包含 任何 CSS 属性 。 

例如 


<P style= "color: sienna; margin- left: 20px"> This is a paragraph< /p> 


(4) 多 重 样式 

如 果 某 些 属性 在 不 同 的 样式 表 中 被 同样 的 选择 器 定义 ,那么 属性 值 将 从 更 具体 的 样 
式 表 中 被 继承 过 来 。 

例如 ,外 部 样式 表 拥 有 针对 h3 选择 器 的 3 个 属性 ， 


h3 { color: red; text-align: left; font- size: gpt; } 

而 内 部 样式 表 拥 有 针对 h3 选择 器 的 两 个 属性 : 

h3 { text- align: right; font- size: 20pt; } 

假如 拥有 内 腐 样式 表 的 页 面 同时 与 外 部 样式 表 链 接 ,那么 h3 得 到 的 样式 如 下 : 
color: red; text-align: right; font- size: 20pt; 


即 颜色 属性 将 被 继承 于 外 部 样式 表 , 而 文字 排列 (text-alignment) 和 字体 尺寸 (font- 
size) 会 被 内 部 样式 表 中 的 规则 取代 。 
同样 ,拥有 内 嵌 样 式 表 的 页 面 同时 具有 行内 样式 ,例如 : 


<h3 style= 'text-align:center;margin- left:20px; '> 多 重 样式 < /h3> 
那么 h3 得 到 的 样式 是 : 


Color: red; text- align: cenetr; font- size: 20pt; margin- left:20px; 
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以 上 实例 说 明 : 当 同 样 的 属性 被 不 同 的 样式 表 重 复 定义 时 ,行内 样式 优先 级 最 高 ,其 
次 是 内 身 样 式 , 外 部 样式 优先 级 最 低 。 请 思考 , 当 同 一 个 样式 被 不 同 的 选择 器 重复 定义 
时 ,优先 级 情况 如 何 。 


223 创建 样式 上 机 实验 样 例 


1. 实验 题目 
多 重 样 式 及 优先 级 验证 。 
2. 实验 代码 


(1) CSS 文 件 。 


#divl{ border- color:Green; } 
.div{ border- style:dotted; } 


(2) HTML 文件 。 


<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>2- 2- 2- 创 建 样式 < /title> 
<1link href="2- 2- 2.css" rel= "stylesheet" type= "text/css" /> 
<style type= "text/css"> 
.div{ border- style: double; border - width: lpx; margin - left: 10px; margin— 


top: 30px; } 
#div]l {border- color:Blue;border- width:5px;margin- left:100px;} 
</style> 
< /head> 
<body> 


<div id= "divl" class= 'div' style= "border:red;width:70px;height:70px; 
border- width: 9px;border- style:groove;">< /div> 

< /body> 

</htm> 


3. 浏览 器 中 查看 
浏览 器 中 的 显示 效果 如 图 2. 19 所 示 。 





2. 19 验证 CSS 优先 级 的 浏览 器 显示 
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4. 在 浏览 器 的 查看 器 中 查看 分 析 运 行 结果 


按 F12 键 ,浏览 器 底部 出 现 开发 人 员工 具 界 面 。 单 击 “ 查 看 器 ”, 选 中 div1, 如 图 2. 20 
所 示 。 单 击 右 侧 的 “规则 ”, 显 示 界 面 如 图 2. 21 所 示 。 





7- 三 后 六 日 
| mw 
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margin-top: 30px; 


divO { 2-2-2.css:2| 








2.21 验证 CSS 优先 级 文档 的 样式 规则 


观察 图 2. 21, 得 出 如 下 结论 : 

g@ 行内 (元 素 ) 样 式 优先 级 最 高 ,在 行内 的 样式 全 部 有 效 。 与 行内 样式 冲突 的 内 扰 
ID 选择 器 样式 和 内 和 嵌 类 选择 器 样式 优先 级 均 低 于 行内 样式 。 如 图 2. 5 所 示 ,在 内 内 的 划 
divl 和 . div 的 border-width 规则 均 出 现 删 除 线 , 在 外 部 的 # divl 和 内 杰 的 # divl 的 
border-color 同时 出 现 删除 线 。 同 样 ,与 行内 样式 冲突 的 外 部 类 和 内 艇 类 选择 器 样式 优 
先 级 均 低 于 行内 样式 。 如 图 2. 5 所 示 ,在 外 部 的 . div 和 内 徐 的 . div 的 border-style 规则 
出 现 删除 线 。 

@ ID 选择 器 优先 级 高 于 类 选择 器 。 内 和 岩 的 margin-left 样式 规则 出 现在 # divl 和 
. div 选择 器 中 ,但 #divl 选择 器 内 的 样式 有 效 , 而 . div 选择 器 内 的 样式 无 效 , 如 图 2. 21 
所 示 。 
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(3) 对 于 某 个 HTML 标签 ,如 果 有 多 种 样式 , 且 规 定 的 样式 没有 冲突 , 则 又 加 ;如 果 
有 冲突 , 则 最 先 考 虑 行内 样式 表 显 示 ; 如 果 没 有 行内 样式 ,再 考虑 内 嵌 样 式 显示 ;如 果 没 
有 内 内 样 式 , 最 后 采用 外 面 样式 表 显 示 ; 和 否则 ,如 果 行 内 样式 .内 嵌 样 式 和 外 部 样式 均 没 
有 , 按 HTML 的 默认 样式 显示 。 


224 样式 属性 及 其 描述 


1. 背景 


CSS 允许 应 用 纯色 作为 背景 ,也 允许 使 用 背景 图 像 创 建 复杂 效果 ,背景 属性 及 其 描 
述 如 表 2. 2 所 示 。 


表 2.2 背景 属性 及 其 描述 




















属 3 描 述 
background 简写 属性 ,作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-attachment 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 
background-color 设置 元 素 的 背景 颜色 
background-image 把 图 像 设 置 为 背景 
background-position 设置 背景 图 像 的 起 始 位 置 
background-repeat 设置 背景 图 像 是 否 及 如 何 重复 





所 有 浏览 器 都 支持 background 属性 。background 简写 属性 在 一 个 声明 中 设置 所 有 
背景 属性 。 

可 按 background-color、 background-position、background-size、 background-repeat、 
background-origin、 background-clip、 background-attachment、 background-image 的 顺序 
设置 。 如 果 不 设置 其 中 的 某 个 值 ,也 不 会 出 问题 ,比如 background: # ff0000 urlCsmiley. 
gif); 也 是 允许 的 。 建 议 使 用 这 个 属性 ,而 不 是 分 别 使 用 单个 属性 ,因为 输入 的 字母 也 
更 少 。 


2. 文本 


CSS 文本 属性 可 定义 文本 外 观 。 通 过 设置 文本 属性 ,可 改变 文本 颜色 、 字 符 间 距 , 可 
对 齐 文本 、 装 饰 文本 、 对 文本 进行 缩 进 等 ,文本 属性 及 其 描述 如 表 2. 3 所 示 。 


表 2.3 文本 属性 及 其 描述 

















属 性 描 述 
color 设置 文本 颜色 
direction 设置 文本 方向 
line-height 设置 行 高 
letter-spacing 设置 字符 间距 
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续 表 
属 性 描 述 
text-align 对 齐 元 素 中 的 文本 
text-decoration 向 文本 添加 修饰 
text-indent 缩 进 元 素 中 文本 的 首 行 
text-shadow 设置 文本 阴影 。CSS2 包含 该 属性 ,但 是 CSS2. 1 没有 保留 该 属性 
text-transform 控制 元 素 中 的 字母 
unicode-bidi 设置 文本 方向 
white-space 设置 元 素 中 空白 的 处 理 方式 
word-spacing 设置 字 间 距 


3. 字体 





CSS 字体 属性 定义 文本 的 字体 系列 、 大 小 、 加 粗 、 风 格 ( 如 斜体 ) 和 变形 (如 小 型 大 写 
字母 ) ,相关 设置 属性 及 其 描述 如 表 2.4 所 示 。 


表 2.4 字体 属性 及 其 描述 











属 性 描 述 
ont 简写 属性 。 作 用 是 把 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 
设置 字体 系列 。 有 两 种 类 型 的 字体 系列 名 称 , 包 括 指定 的 系列 名 称 和 通常 字体 系 
ont-family 列 名 称 。 指 定 的 系列 名 称 需要 具体 字体 的 名 称 , 如 times ,courier arial。 通 常 字体 
系列 名 称 如 serif .sans-serif ,cursive、fantasy、monospace 等 
ont-size 设置 字体 的 尺寸 





ont-size-adjust 当 首 选 字 体 不 可 用 时 ,对 替换 字体 进行 智能 缩放 (CSS2. 1 已 删除 该 属性 





对 字体 进行 水 平 拉 仲 (CSS2. 1 已 删除 该 属性 ) 。 枚 举 值 : normal、 wider、narrower、 
ont-stretch extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra- 


expanded .ultra-expanded 

















ont-style 设置 字体 风格 , 枚 举 值 : normal ,italic .oblique .inherit 
ont-variant 以 小 型 大 写字 体 或 者 正常 字体 显示 文本 。 枚 举 值 : normal、small-caps 和 inherit 
ont-weight 设置 字体 的 粗细 








所 有 浏览 器 都 支持 font 属性 。 任何 版 本 的 Internet Explorer 都 不 支持 属性 值 
inherit。font 简写 属性 在 一 个 声明 中 设置 所 有 字体 属性 。 此 属性 也 有 第 六 个 值 : line- 


height, 可 设置 行 间 距 。 


这 个 简写 属性 用 于 一 次 设置 元 素 字 体 的 两 个 或 更 多 方面 。 使 用 icon 等 关键 字 可 以 
适当 地 设置 元 素 的 字体 ,使 之 与 用 户 计 算 机 环境 中 的 某 个 方面 一 致 。 注 意 ,如 果 没 有 使 
用 这 些 关 键 词 ,至 少 要 指定 字体 大 小 和 字体 系列 。 

可 按 font-style、font-variant ,font-weight、 font-size/line-height、 font-family 顺序 设 
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置 。 可 以 不 设置 其 中 的 某 个 值 ,比如 font:100% verdana; 也 是 允许 的 。 未 设置 的 属性 会 
使 用 其 默认 值 。 

在 一 个 声明 中 设置 所 有 字体 属性 的 示例 如 下 : 

p-.exl { font:italic arial,sans- serif; } 


p-ex2 { font:italic bold 12px/20px arial,sans- serif; } 
4. 链接 


链接 能 够 根据 它们 所 处 的 状态 来 设置 它们 的 样式 ,链接 有 以 下 4 种 状态 : 
a:link: 普通 的 .未 被 访问 的 链接 。 

asvisited: 用 户 已 访问 的 链接 。 

a:hover: 鼠标 指针 位 于 链接 的 上 方 。 

asactive: 链接 被 单 击 的 时 刻 。 


实例 如 下 : 

a:link {color:#FF0000;} /* 未 被 访问 的 链接 * / 
a:visited {color:#00FF00;} /x* 已 被 访问 的 链接 * / 
a:hover {color:#FFOOFF;} /* 鼠标 指针 移动 到 链接 上 * / 
a:active {color:#0000FF;} /* 正在 被 单 击 的 链接 * / 

5, 列表 


CSS 列表 属性 允许 放置 .改变 列表 项 标志 ,或 者 将 图 像 作 为 列表 项 标志 。 
CSS 列表 属性 及 其 描述 如 表 2. 5 所 示 。 
表 2.5 CSS 列表 属性 及 其 描述 

















属 性 描 述 
list-style 简写 属性 。 用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 
list-style-image 将 图 象 设置 为 列表 项 标志 
list-style-position 设置 列表 中 列表 项 标志 的 位 置 
list-style-type 设置 列表 项 标志 的 类 型 
6. 表格 


CSS 表格 属性 可 以 改善 表格 的 外 观 , 相 关 属性 及 其 描述 如 表 2. 6 所 示 。 
表 2.6 CSS 表格 属性 及 其 描述 
属 性 描 述 
border-collapse 设置 是 否 把 表格 边框 合并 为 单一 的 边框 
border-spacing 设置 分 隔 单元 格 边框 的 距离 
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续 表 
属 性 描 述 
caption-side 设置 表格 标题 的 位 置 
empty-cells 设置 是 否 显示 表格 中 的 空 单元 格 
table-layout 设置 显示 单元 \ 行 和 列 的 算法 
7. 轮廓 





轮廓 绘制 元 素 周 围 的 一 条 线 。 该 线 位 于 边框 边缘 的 外 围 ,起 到 突出 元 素 的 作用 。 
CSS 的 outline 属性 规定 元 素 4 个 外 轮廓 的 样式 .颜色 和 宽度 ,其 描述 如 表 2.7 所 示 。 
outline 属性 的 示例 如 下 : 


p { outline:#00FF00 dotted thick; } 


outline 简写 属性 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 可 以 按 顺序 设置 : outline- 


color、outline-style 和 outline-width 3 个 属性 。 


表 2.7 轮廓 属性 及 其 描述 














属 性 描 述 CSS 
outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性 2 
outline-color 设置 轮廓 的 颜色 2 

. 设置 轮廓 的 样式 。 枚 举 值 : none、 hidden、 dotted、 dashed ,solid double、 
outline-style 3 2 
groove ridge \inset .outset inheri 
outline-width 设置 轮廓 的 宽度 2 
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1. 基础 知识 


规定 了 元 素 框 处 理 元 素 内 容 、 内 边 距 .边框 和 外 边 距 的 方式 。 在 浏览 器 下 ,每 一 个 
html 元 素 都 会 被 解析 为 一 个 装 有 东西 的 盒子 。 盒 子 本 身 有 自己 的 边框 (border) ,盒子 里 
的 内 容 到 盒子 边框 的 距离 称 为 填充 (padding) ,盒子 边框 与 其 他 盒子 之 间 的 距离 为 边界 
(margin)。 在 CSS 模型 设计 中 ,元 素 真实 的 宽度 和 高 度 不 仅仅 由 width 和 height 来 决 
定 , 还 包括 内 边 距 、 外 边 距 、 边 框 ,如 图 2. 22 所 示 。 

元 素 框 最 内 部 分 是 实际 内 容 , 直接 包围 内 容 的 是 内 边 距 。 内 边 距 呈现 了 元 素 的 背 
景 。 内 边 距 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 , 外 边 距 默 认 是 透明 的 ,因此 不 会 遮挡 其 
后 的 任何 元 素 。 背 景 应 用 于 由 内 容 和 内 边 距 、 边 框 组 成 的 区 域 。 内 边 距 边框 和 外 边 距 
都 是 可 选 的 ,默认 值 是 零 。 但 是 ,许多 元 素 将 由 用 户 代 理 样式 表 设 置 外 边 距 和 内 边 距 。 
可 以 通过 将 元 素 的 margin 和 padding 设置 为 零 来 覆盖 这 些 浏览 器 样式 。 这 可 以 分 别 进 





| | (宽度 ) 《 右 内 边 距 ) 
EM > padding- ! 
jPoddingleft ! right 
| | 人 
: | (上 内 边 距 ) 
! 1 padding-top 
元 (高 度 ) 
ES height 
(下 内 边 距 ) 
padding-bottom 








2.22 盒子 模型 


行 , 也 可 以 使 用 通用 选择 器 设置 所 有 元 素 。 在 CSS 中 , width 和 height 指 的 是 内 容 区 域 
的 宽度 和 高 度 。 增 加 内 边 距 ,边框 和 外 边 距 不 会 影响 内 容 区 域 的 尺寸 ,但 是 会 增加 元 素 
框 的 总 尺寸 。 内 边 距 ,边框 和 外 边 距 可 以 应 用 于 一 个 元 素 的 所 有 边 , 也 可 以 应 用 于 单独 
的 边 。 外 边 距 可 以 是 负 值 .而 且 在 很 多 情况 下 都 要 使 用 负 值 的 外 边 距 。 

(1) 内 边 距 

元 素 的 内 边 距 在 边框 和 内 容 区 之 间 。 控 制 该 区 域 最 简单 的 属性 是 padding 属性 。 
CSS padding 属性 定义 元 素 边框 与 元 素 内 容 之 间 的 空白 区 域 。 内 边 距 及 其 描述 如 表 2. 8 
所 示 。 

表 2.8 内 边 距 及 其 描述 

















属 性 描 述 
padding 简写 属性 。 作 用 是 在 一 个 声明 中 设置 元 素 的 内 边 距 属性 
padding-bottom 设置 元 素 的 下 内 边 距 
padding-left 设置 元 素 的 左 内 边 距 
padding-right 设置 元 素 的 右 内 边 距 
padding-top 设置 元 素 的 上 内 边 距 





padding 属性 为 上 \ 右 下 、 左 4 个 内 边 距 赋值 ,有 多 种 方式 实现 ,多 种 方式 可 以 通过 
复制 方式 实现 简化 。 简 化 规则 如 下 : 

Q@ 如果 缺少 左 内 边 距 的 值 , 则 使 用 右 内 边 距 的 值 。 

@ 如 果 缺 少 下 内 边 距 的 值 . 则 使 用 上 内 边 距 的 值 。 

加 如 果 缺 少 右 内 边 距 的 值 , 则 使 用 上 内 边 距 的 值 。 
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例如 : 


hl { padding: 0.25em lem 0.5em;} 
h2 { padding: 0.5em lem;} 
p { padding: lpx;} 


(2) 边框 


/= 缺少 左 内 边 距 ,等 价 于 0.25em lem 0.5em lemx / 
/缺少 左 和 下 内 边 距 , 等 价 于 0.5em lem 0.5em lemx / 
/* 缺少 左 . 下 和 右 内 边 距 ,等 价 于 lpx lpx lpx lpx* / 


HTML 中 使 用 表格 来 创建 文本 周围 的 边框 ,但 是 通过 使 用 CSS 边框 属性 可 以 创建 


出 效果 出 色 的 边框 ,六 


F 且 可 以 应 用 于 任何 元 素 。 元 素 外 边 距 内 就 是 元 素 的 边框 (border)。 





元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 。 
每 个 边框 有 3 个 方面 : 宽度 .样式 及 颜色 。CSS 规范 指出 ,边框 绘制 在 “元 素 的 背景 
之 上 ”。 因 为 有 些 边 框 是 “间断 的 (例如 点 线 边框 或 虚线 框 ) ,元 素 的 背景 应 当 出 现在 边 


框 的 可 见 部 分 之 间 。 


边框 及 其 描述 如 表 2.9 所 示 。 


属 性 


表 2.9 边框 及 其 描述 
描 述 





border 


简写 属性 ,用 于 把 针对 四 个 边 的 属性 设置 在 一 个 声明 中 





border-style 


用 于 设置 元 素 所 有 边框 的 样式 ,或 者 单独 地 为 各 边 设置 边框 样式 。 枚 举 值 : 


none,hidden\ dotted .dashed .solid double \ groove, ridge inset ,outset ,inheri 





border-width 


简写 属性 ,用 于 为 元 素 所 有 边框 设置 宽度 ,或 者 单独 地 为 各 边 边框 设置 宽度 





border-color 


简写 属性 ,设置 元 素 所 有 边框 中 可 见 部 分 的 颜色 ,或 为 4 个 边 分 别 设置 颜色 





border-bottom 


简写 属性 ,用 于 把 下 边框 的 所 有 属性 设置 到 一 个 声明 中 



































border-bottom-color | 设置 元 素 下 边框 的 颜色 
border-bottom-style | 设置 元 素 下 边框 的 样式 
border-bottom-width | 设置 元 素 下 边框 的 宽度 
border-left 简写 属性 ,用 于 把 左边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-left-color 设置 元 素 左 边框 的 颜色 
border-left-style 设置 元 素 左边 框 的 样式 
border-left-width 设置 元 素 左 边框 的 宽度 
border-right 简写 属性 ,用 于 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-right-color 设置 元 素 右 边框 的 颜色 
border-right-style 设置 元 素 右 边框 的 样式 
border-right-width 设置 元 素 右 边框 的 宽度 














border-top 简写 属性 ,用 于 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-top-color 设置 元 素 上 边框 的 颜色 
border-top-style 设置 元 素 上 边框 的 样式 
border-top-width 设置 元 素 上 边框 的 宽度 
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border 属性 用 于 同时 设置 4 个 边框 的 宽度 、 线 型 和 颜色 ,例如 : 
p { border:5px solid red; } 


(3) 外 边 距 

围绕 在 元 素 边框 的 空白 区 域 是 外 边 距 。 设置 外 边 距 会 在 元 素 外 创建 额外 的 “空白 ”。 
设置 外 边 距 的 最 简单 方法 就 是 使 用 margin 属性 ,这 个 属性 接受 任何 长 度 单位 (像素 、 英 
十 .毫米 或 em) .百分数 值 甚至 负 值 。margin 可 以 设置 为 auto。 常 见 的 做 法 是 为 外 边 距 
设置 长 度 值 。margin 的 默认 值 是 0, 如 果 没 有 为 margin 声明 一 个 值 , 就 不 会 出 现 外 边 距 。 
但 在 实际 中 ,浏览 器 对 许多 元 素 已 经 提供 了 预定 的 样式 ,外 边 距 也 不 例外 。 例 如 ,在 支持 
CSS 的 浏览 器 中 ,外 边 距 会 在 每 个 段落 元 素 的 上 面 和 下 面 生成 “ 空 行 ?。 因 此 ,如 果 没 有 
为 p 元 素 声 明 外 边 距 ,浏览 器 可 能 会 自己 应 用 一 个 外 边 距 。 当 然 , 作 了 声明 之 后 ,就 会 覆 
盖 默 认 样式 ,外 边框 属性 及 其 描述 如 表 2. 10 所 示 。 


表 2.10 外 边框 属性 及 其 描述 

















属 性 描 述 
margin 简写 属性 。 在 一 个 声明 中 设置 所 有 外 边 距 属性 
margin-bottom 设置 元 素 下 外 边 距 
margin-left 设置 元 素 的 左 外 边 距 
margin-right 设置 元 素 的 右 外 边 距 
margin-top 设置 元 素 的 上 外 边 距 





margin 属性 为 上 、 右 \ 下 、 左 4 个 外 边 距 赋值 ,有 多 种 方式 实现 ,多 种 方式 可 以 通过 复 
制 方式 实现 简化 。 简 化 规则 如 下 : 

Q 如 果 缺 少 左 外 边 距 的 值 , 则 使 用 右 外 边 距 的 值 。 

@ 如 果 缺 少 下 外 边 距 的 值 , 则 使 用 上 外 边 距 的 值 。 

@ 如 果 缺 少 右 外 边 距 的 值 . 则 使 用 上 外 边 距 的 值 。 


例如 : 

hl {margin: 0.25em lem 0.5em;} /* 缺少 左 外 边 距 , 等 价 于 0.25em lem 0.5em lem* / 
h2 {margin: 0.5em lem;} /= 缺少 左 和 下 外 边 距 ,等 价 于 0.5em lem 0.5em lemx / 

p {margin: lpx;} /* 缺少 左 、 下 和 右 外 边 距 , 等 价 于 lpx lpx lpx lpx* / 


(4) 外 边框 合并 

外 边 距 合并 (又 加 ) 是 一 个 相当 简单 的 概念 。 但 是 ,在 实践 中 对 网 页 进行 布局 时 ,会 
造成 许多 混淆 。 外 边 距 合并 是 指 , 当 两 个 垂直 外 边 距 相遇 时 ,它们 将 形成 一 个 外 边 距 。 
合并 后 的 外 边 距 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 当 一 个 元 素 出 现 
在 另 一 个 元 素 上 面 时 ,第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 外 边 距 会 发 生 合并 ,如 
图 2. 23 所 示 。 

当 一 个 元 素 包 含 在 另 一 个 元 素 中 时 (假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 ) ,它们 
的 上 和 /或 下 外 边 距 也 会 发 生 合并 ,如 图 2. 24 所 示 。 
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合并 之 前 合并 之 后 
内 容 区 域 内 容 区 域 


margin-top; 10px 形成 一 个 外 边 距 


| 
| 
| 
| 
| 
| 
| 
margin-bottom;20px | margin-bottom ;20px 
| 2 小 外 边 距 合并 Ee - 于 人 2 | 
| 
| 
内 容 区 域 | 











2.23 一 个 元 素 的 下 外 边 距 与 另 一 个 元 素 的 上 外 边 距 合并 





合并 之 前 合 
3 pd | [RS er | 
margin-top; 20px } 让 雪耻 全 并 | margin-top; 20px | 
me 形成 一个 外 这 下 四 | | 
margin-top: 10px | I | 内 容 区 域 | | 
| 


| 
| 
| 
| 
| | msE 域 | | | 
| | 
| 
| 


2.24 被 包含 元 素 与 包含 元 素 的 上 外 边 距 合并 


假设 有 一 个 空 元 素 , 它 有 外 边 距 , 但 是 没有 边框 或 填充 。 此 时 上 外 边 距 与 下 外 边 距 
就 碰 到 了 一 起 ,它们 会 发 生 合并 ,如 图 2. 25 所 示 。 


合并 之 前 合并 之 后 
| ep | | 
| margin-top: 20| FF 一 一 一 一 一 一 一 一 一 一 一 一 | 
| 人 | 外 边 距 合并 加 | margin-top: 20px | 
| margin-bottom:20px | 形成 一 个 外 边 距 i J 


图 2.25 一 个 空 元 素 上 下 外 边 距 合并 


如 果 这 个 外 边 距 遇 到 另 一 个 元 素 的 外 边 距 ,还 会 发 生 合并 ,如 图 2. 26 所 示 。 


合并 之 前 合并 之 后 
| ee | 
| 所 有 外 边 距 合并 四 | margin-top: 20px | 
| margin-top: 20px | 形成 一 个 外 边 距 Ca 

| 
| 
| 


2.26 一 个 空 元 素 与 父 元 素 外 边 距 合并 
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这 就 是 一 系列 的 段落 元 素 占用 空间 非常 小 的 原因 ,因为 它们 的 所 有 外 边 距 都 合并 到 
一 起 ,形成 了 一 个 小 的 外 边 距 。 

外 边 距 合并 具有 实际 意义 。 以 由 几 个 段落 组 成 的 典型 文本 页 面 为 例 。 第 一 个 段落 
上 面 的 空间 等 于 段落 的 上 外 边 距 。 如 果 没 有 外 边 距 合并 ,后 续 所 有 段落 之 间 的 外 边 距 都 
将 是 相 邻 上 外 边 距 和 下 外 边 距 的 和 。 这 意味 着 段落 之 间 的 空间 是 页 面 顶部 的 两 倍 。 如 
果 发 生 外 边 距 合并 ,段落 之 间 的 上 外 边 距 和 下 外 边 距 就 合并 在 一 起 ,这 样 各 处 距离 就 一 
藤本 5 

段落 文档 上 下 间距 均匀 的 示例 如 图 2. 27 所 示 。 

没有 外 边 距 合并 有 外 边 距 合并 



































段落 之 间 的 外 边 距 是 上 外 边 距 的 两 倍 段落 之 间 的 外 边 距 与 上 外 边 距 相同 
2.27 段落 文档 上 下 间距 均匀 的 示例 


只 有 普通 文档 流 中 块 框 的 垂直 外 边 距 才 会 发 生 外 边 距 合并 。 行内 框 、 浮 动 框 或 绝对 
定位 之 间 的 外 边 距 不 会 合 


2. DIV 标签 


<DIV 过 定义 文档 中 的 分 区 和 节 ,能 把 文档 分 割 为 独立 的 .不 同 的 部 分 ,可 用 做 严格 
的 组 织 工具 。 如 果 用 ID 或 者 Class 来 标记 二 DIV 二 ,那么 该 标签 的 作用 会 变 得 更 加 有 
效 。 过 DIV> 是 一 个 块 级 元 素 。 这 意味 着 它 的 内 容 自动 地 开始 一 个 新 行 。 实 际 上 ,换行 
是 二 DIV 二 固有 的 唯一 格式 表现 。 可 以 通过 和 二 DIV 二 的 Class 或 ID 应 用 额外 的 样式 。 不 
必 为 每 一 个 DIV 二 都 加 上 类 或 ID, 虽 然 这 样 做 也 有 一 定 的 好 处 。 可 以 对 同一 个 二 DIV> 
元 素 应 用 Class 或 ID 属性 ,但 是 更 常见 的 情况 是 只 应 用 其 中 一 种 。 这 两 者 的 主要 差异 是 
Class 用 于 元 素 组 (类 似 的 元 素 , 或 者 可 以 理解 为 某 一 类 元 素 ) ,而 ID 用 于 标识 单独 的 唯 
一 的 元 素 。div 全 局 属性 及 其 描述 如 表 2. 11 所 示 。 
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表 2.11 div 全 局 属性 及 其 描述 

属 性 HTMLS 新 增 描 述 
accesskey 规定 激活 元 素 的 快捷 键 
class 规定 元 素 的 一 个 或 多 个 类 名 (引用 样式 表 中 的 类 ) 
contenteditable 是 规定 元 素 内 容 是 否 可 编辑 
contextmenu 是 规定 元 素 的 上 下 文 菜单 。 上 下 文 菜单 在 用 户 单 击 元 素 时 显示 
data- * 是 用 于 存储 页 面 或 应 用 程序 的 私有 定制 数据 
dir 规定 元 素 中 内 容 的 文本 方向 
draggable 是 规定 元 素 是 否 可 拖 动 
dropzone 是 规定 在 拖 动 被 拖 动 数据 时 是 否 进行 复制 .移动 或 链接 
hidden 是 规定 元 素 仍 未 或 不 再 相关 
id 规定 元 素 的 唯一 id 
lang 规定 元 素 内 容 的 语言 
spellcheck 是 规定 是 否 对 元 素 进行 拼写 和 语法 检查 
style 规定 元 素 的 行内 CSS 样式 
tabindex 规定 元 素 的 Tab 键 次 序 
title 规定 有 关 元 素 的 额外 信息 
translate 是 规定 是 否 应 该 翻译 元 素 内 容 

226 盒子 模型 上 机 实验 样 例 

1. 实验 目标 

验证 盒子 的 外 形 尺 寸 。 

2. 程序 功能 


建立 一 个 HTML 文档 ,用 嵌 套 的 div 实现 盒子 的 模拟 。 通 过 观察 2 个 div 的 外 形 尺 
才 分 析 盒 子 模型 外 形 宽 和 高 与 width height.border padding 的 关系 。 


3. 实验 步骤 


(1) 建立 源 程序 : 2-2-4- 盒 子 模型 . htm 


<html xmlns= "http://www.w3.0rg/1999/zxhtml"> 


<head> 


<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 2-2- 4 盒子 模型 < /title> 
< Style type= "text/css"> 
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.boxl{ border:1px solid #666666; 
width:500px; 
height:50px; 
background:#CCCC007 
margin:30px 
} 
-box2{ border:1px dashed #FF0000; 
width:300px7 
padding:10px 20px; 
Color:#ffffff; 
background- color:#000066; 
margin:20px 10px 20px- 30px; 
} 
</style> 
< /head> 
<body> 
<div class= "boxl"> 盒 子 1<div class= "box2"> 盒 子 2< /div>< /div> 
< /body> 
</html> 


(2) 用 Firefox 浏览 器 浏览 2-2-4- 盒 子 模型 . htm 
浏览 器 结果 如 图 2. 28 所 示 。 


所 localhost34734/ 源 加 器 C ||Q 六 于 | 家 | 自 2 三 
加 wa 官方 站点 图 景 党 访问 回 火狐 官方 站 点 加 新 手 上 路 加 常用 网 址 。 中移动 版 书 答 





~ 
v 





2.28 在 浏览 器 中 浏览 2-2-4- 盒 子 模型 . htm 


(3) 按 F12 键 用 开发 人 员工 具 的 查看 器 观察 


在 图 2. 28 中 按 F12 键 ,浏览 器 的 底部 出 现 开 发 人 员工 具 ,激活 “查看 器 ”活页 夹 ,如 
图 2. 29 所 示 。 


OQ@ 观察 div. boxl。 


单 击 查看 器 的 div. boxl 元 素 , 浏 览 器 中 给 出 其 外 形 尺寸 为 502 X 52, 如 图 2. 30 
所 示 。 

分 析 : 外 形 宽 = 二 border-left 十 padding-left 十 width 十 padding-right 十 border-right, 选 
中 开发 人 员工 具 的 规则 ,看 到 width 二 500px; border:1px solid 并 666666, 没 有 padding 
意味 着 padding-left 和 padding-right 均 为 0px, border 为 1px 意味 着 border-left 和 
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过 | localhost34734/ 源 转 品 CQ 赵 夫 个 | 由 2 三 
加 XI 信 方 站 点 图 晤 第 访问 上 炎 地 启 方法 点 区 新 手 上 路 | 富 用 网 泪 。 > 站 移 动 厂 和 


~ 
pg 





时 | 查 ，| 矢 -。 恒生 4 RE PR D. ~ 国 - 汉 所 从 回 回 日 
el | 探索 HTML j]# 已 





html xmlns="http: 人 
bb <head> 《</head> 


| Pdiv class="box1”>") /divy | 
/body> 
/htal> v 
html > body 
| 规则 | 计算 后 “动画 字体 
过 小样 式 











图 2.29 在 浏览 器 的 查看 器 中 查看 2-2-4- 盒 子 模 型 . htm 


2-2-4 合 子 模型 x 
过，@ localhost34734/ 源 旧 序 /实验 /2-2 。 国 跟 C |IQ | 合 | 自 及 会 
加 火 至 官方 站 点 图 最 第 访问 四 火狐 官方 站 点 懂 新 手 上 路 占 第 用 网 址 四 京东 商城 @ 火狐 主页 。 ” 口 移动 版 书签 











b head> /head 
ww Cbody> 
FT 


上 border: ipx solid 三 #666666; 
midth: 500px: 


《div class="box2") 辣 于 2C/div>》 
div> 
</bodyy 


html » body » div .box1 





图 2.30 观察 div. boxl 


border-right 均 为 lpx。 因 此 ,502 二 1 十 0 十 500 十 0 十 1; 同 理 , 外形 高 = border-top 十 
padding-top 十 height 十 padding-bottom 十 border-bottom.52 的 由 来 类 似 于 502 的 分 析 。 
@ 观察 div. box2 。 
展开 divl , 单 击 查看 器 的 div. box2 元 素 , 则 浏览 器 中 给 出 其 外 形 尺寸 为 342X44, 如 
图 2.31 所 示 。 图 2. 31 与 图 2. 30 在 外 形 尺寸 上 的 区 别 是 图 2. 31 中 的 规则 中 有 padding， 
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但 没有 height。padding: 10px 20px 意味 着 padding-top 和 padding-bottom 为 10px, 而 
padding-left 和 padding-right 为 20px; 没 有 height 意味 着 内 容 高 度 用 系统 默认 的 22px， 
分 别 代 入 外 形 高 与 外 形 宽 的 公式 ,会 得 到 44 和 342。 


2-2-4 会 子 模型 x 
所 | localhost34734/ 源 程序/ 实验 /2-2 国 器 C | Q 六 ## 安 | 自 咏 会 轨 
日 XW 启 方 站 点 加 最 访问 [火狐 祈 广 站 点 攻 新 手 上 路 | ) 党 用 网 址 网 京东 商城 图 火狐 主页 








MEEETE; 
jhnavy backeround-color: 人 @ #000056; 
html > body > div .box1 > div .box2 | margin: 20px 10px 20px -30px:; 





图 2.31 观察 div. box2 


227 CSS 定位 与 浮动 
1. 定义 


CSS 定位 属性 允许 对 元 素 进行 定位 。CSS 为 定位 和 浮动 提供 了 一 些 属性 ,利用 这 些 
属性 可 以 建立 列 式 布局 ,将 布局 的 一 部 分 与 男 一 部 分 重 伙 ,还 可 以 完成 多 年 来 通常 需要 
使 用 多 个 表格 才能 完成 的 任务 。 

定位 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 ,或 者 相对 于 父 元 素 、. 另 一 个 元 
素 甚 至 浏览 器 窗口 本 身 的 位 置 。 另 一 方面 ,CSS1 中 就 提出 了 浮动 , 它 以 Netscape 在 
Web 发 展 初期 增加 的 一 个 功能 为 基础 。 浮 动 不 完 全 是 定位 ,不 过 , 它 当 然 也 不 是 正常 流 
布局 。 


2. 块 级 元 素 与 行内 元 素 


div、hl 或 p 元 素 常常 被 称 为 块 级 元 素 。 这 意味 着 这 些 元 素 显示 为 一 块 内 容 , 即 “ 块 
框 ”"。 与 之 相反 ,span 和 strong 等 元 素 称 为 “行内 元 素 ”", 因 为 其 内 容 显示 在 行 中 , 称 为 
“行内 框 ”。 

可 使 用 display 属性 改变 生成 的 框 的 类 型 。 将 display 属性 设置 为 block, 可 以 让 行 
内 元 素 ( 比 如 二 a> 元 素 ) 表 现 得 像 块 级 元 素 一 样 。 还 可 以 把 display 设置 为 none, 使 生 
成 的 元 素 根本 没有 框 。 这 样 该 框 及 其 所 有 内 容 就 不 再 显示 ,不 占用 文档 中 的 空间 。 

但 在 一 种 情况 下 ,即使 没有 进行 显 式 定义 ,也 会 创建 块 级 元 素 。 这 种 情况 发 生 在 把 
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一 些 文本 添加 到 一 个 块 级 元 素 ( 比 如 div) 的 开头 。 即 使 没有 把 这 些 文 本 定义 为 段落 , 它 
也 会 被 当做 段落 对 待 。 在 这 种 情况 下 ,这 个 框 称 为 无 名 块 框 ,因为 它 不 与 专门 定义 的 元 
素 相关 联 。 

块 级 元 素 的 文本 行 也 会 发 生 类 似 的 情况 。 假 设 有 一 个 包含 3 行文 本 的 段落 ,每 行文 
本 形成 一 个 无 名 框 。 无 法 直接 对 无 名 块 或 行 框 应 用 样式 ,因为 没有 可 以 应 用 样式 的 地 方 
(注意 , 行 框 和 行内 框 是 两 个 概念 )。 但 这 有 助 于 理解 在 屏幕 上 看 到 的 所 有 东西 都 形成 某 
种 框 。 


3. 定位 机 制 


CSS 有 3 种 基本 的 定位 机 制 : 普通 流 、 浮 动 和 绝对 定位 。 除 非 专 门 指定 ,否则 所 有 框 
都 在 普通 流 中 定位 。 也 就 是 说 ,普通 流 中 元 素 的 位 置 由 元 素 在 (X)HTML 中 的 位 置 决 
定 。 块 级 框 从 上 到 下 一 个 接 一 个 地 排列 , 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计算 出 
来 的 。 

行内 框 在 一 行 中 水 平 布置 ,可 使 用 水 平 内 边 距 、 边 框 和 外 边 距 调整 它们 的 间距 。 但 
是 ,垂直 内 边 距 .边框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 行 杠 
(Line Box) , 行 框 的 高 度 总 是 足以 容纳 它 包 含 的 所 有 行内 框 。 不 过 ,设置 行 高 可 以 增加 这 
个 框 的 高 度 。 


4. position 属性 


使 用 position 属性 可 以 选择 4 种 不 同类 型 的 定位 ,这 会 影响 元 素 框 生成 的 方式 。 
position 属性 值 的 含义 如 下 。 

(1) static。 

元 素 框 正常 生成 。 块 级 元 素 生 成 一 个 矩形 框 ,作为 文档 流 的 一 部 分 ,行内 元 素 则 会 
创建 一 个 或 多 个 行 框 , 置 于 其 父 元 素 中 。 

(2) relative。 

元 素 框 偏 移 某 个 距离 。 元 素 仍 保持 其 未 定位 前 的 形状 , 它 原本 所 占 的 空间 仍 保留 。 
如 果 对 一 个 元 素 进 行 相 对 定位 , 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 可 以 通过 设置 垂直 或 
水 平 位 置 ,让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进行 移动 。 

如 果 将 top 设置 为 20px, 那 么 框 将 在 原 位 置顶 部 下 面 20 像素 之 处 。 如 果 left 设置 
为 30 像素 ,那么 元 素 左 边 会 创建 30 像素 的 空间 ,也 就 是 将 元 素 向 右 移动 ,如 图 2. 32 
所 示 。 

#box relative { position: relative; left: 30px; top: 20px; } 

使 用 相对 定位 时 ,无 论 是 否 移动 ,元 素 仍然 占据 原来 的 空间 。 因 此 ,移动 元 素 会 导致 
它 覆 盖 其 他 框 。 

(3) absolute。 

元 素 框 从 文档 流 完 全 删除 ,并 相对 于 其 包含 块 定位 。 包 含 块 可 能 是 文档 中 的 另 一 个 














2.32 相对 定位 示例 


元 素 或 者 是 初始 包含 块 。 元 素 原先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ,就 好 像 元 素 原 
来 不 存在 一 样 。 元 素 定位 后 生成 一 个 块 级 框 ,而 不 管 它 原来 在 正常 流 中 生成 何 种 类 型 
的 框 。 绝 对 定位 使 元 素 的 位 置 与 文档 流 无 关 , 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 
同 , 相 对 定位 实际 上 被 看 做 普通 流 定位 模型 的 一 部 分 ,因为 元 素 的 位 置 相 对 于 它 在 普 
通 流 中 的 位 置 。 普 通 流 中 其 他 元 素 的 布局 就 像 绝 对 定位 的 元 素 不 存在 一 样 , 如 图 2. 33 
所 示 。 


#box relative { position: absolute; left: 30px; top: 20px; } 





相对 定位 的 祖先 元 素 


广 





图 2.33 绝对 定位 示例 


绝对 定位 元 素 的 位 置 相对 于 最 近 的 已 定位 祖先 元 素 ,如 果 元 素 没有 已 定位 的 祖先 元 
素 ,那么 它 的 位 置 相 对 于 最 初 的 包含 块 。 对 于 定位 的 主要 问题 ,是 要 记 住 每 种 定位 的 意 
义 。 相 对 定位 是 “相对 于 ”元 素 在 文档 中 的 初始 位 置 , 而 绝对 定位 是 “相对 于 ”最 近 的 已 定 
位 祖先 元 素 ,如 果 不 存 在 已 定位 的 祖先 元 素 ,那么 “相对 于 ”最 初 的 包含 块 。 根据 用 户 代 
理 的 不 同 ,最 初 的 包含 块 可 能 是 画布 或 HTML 元 素 。 因 为 绝对 定位 的 框 与 文档 流 无 关 ， 
所 以 它们 可 以 覆盖 页 面 上 的 其 他 元 素 。 可 以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆放 
次 序 。 

(4) fixed。 

元 素 框 的 表现 类 似 于 将 position 设置 为 absolute, 不 过 其 包含 块 是 视窗 本 身 。 

定位 属性 及 其 描述 如 表 2. 12 所 示 。 
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表 2.12 定位 属性 及 其 描述 
































属 性 描 述 
Position 把 元 素 放置 到 一 个 静态 的 .相对 的 、 绝 对 的 或 固定 的 位 置 中 
top 定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 移 
right 定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右 边界 之 间 的 偏 移 
bottom 定义 了 定位 元 素 下 外 边 距 边 界 与 其 包含 块 下 边界 之 间 的 偏 移 
left 定义 了 定位 元 素 左 外 边 距 边 界 与 其 包含 块 左边 界 之 间 的 偏 移 
pe 设置 当 元 素 的 内 容 溢 出 其 区 域 时 发 生 的 事情 。 枚 举 值 : visible、hidden scroll、auto 
和 inherit 
clip 设置 元 素 的 形状 。 元 素 被 剪 人 这 个 形状 之 中 ,然后 显示 出 来 
vertical-align | 设置 元 素 的 垂直 对 齐 方式 
z-index 设置 元 素 的 堆 全 顺序 
5. 浮动 


浮动 的 框 可 以 向 左 或 向 右 移动 ,直到 它 的 外 边缘 磁 到 包含 框 或 男 一 个 浮动 框 的 边框 
为 止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ,所 以 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 
不 存在 一 样 。 当 把 框 1 向 右 浮动 时 , 它 脱 离 文 档 流 并 且 向 右 移动 ,直到 它 的 右边 缘 碰 到 
包含 框 的 右边 缘 , 如 图 2. 34 所 示 。 
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图 2.34 浮动 示例 1 


当 框 1 向 左 浮动 时 , 它 脱离 文档 流 并 且 向 左 移动 ,直到 它 的 左边 缘 碰 到 包含 框 的 左 
边缘 。 因 为 它 不 再 处 于 文档 流 中 ,所 以 不 占据 空间 ,实际 上 覆盖 住 了 框 2, 使 框 2 从 视图 
中 消失 。 如 果 把 所 有 3 个 框 都 向 左 移动 ,那么 框 1 向 左 浮动 直到 碰 到 包含 框 ,另外 2 个 框 
向 左 浮动 直到 碰 到 前 一 个 浮动 框 ,如 图 2. 35 所 示 。 

如 图 2. 36 所 示 ,如 果 包 含 框 太 罕 , 无 法 容纳 水 平 排列 的 3 个 浮动 元 素 ,那么 其 他 浮 
动 块 向 下 移动 ,直到 有 足够 的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 , 那 么 当 它 们 向 下 移动 时 ， 
可 能 被 其 他 浮动 元 素 “ 卡 住 ”。 
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图 2.35 浮动 示例 2 





框 1 向 左 祖 动 所 有 3 个 框 向 左 浮动 

nie eis nt 1 
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通过 float 属性 实现 元 素 的 浮动 。 所 有 主流 浏览 器 都 支持 float 属性 。 
动 方向 。 在 CSS 中 ,任何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ,而 
是 何 种 元 素 。 如 果 浮 动 非 蔡 换 元 素 , 则 要 指定 一 wo 否则 ,它们 会 

假如 一 行 之 上 只 有 极 少 的 空间 可 供 浮动 元 素 , 那 么 这 个 元 素 会 跳 至 下 一 


义 元 素 的 浮 
不 论 它 本 身 
尽 可 能 地 鹤 。 








图 2.36 浮动 示例 3 


行 , 这 个 过 程 会 持续 到 某 一 行 拥 有 足够 的 空间 为 止 。 
float 枚 举 值 及 其 描述 如 表 2. 13 所 示 。 


表 2.13 float 枚 举 值 及 其 描述 


float 属性 定 

















值 描 述 
left 元 素 向 左 浮动 
right 元 素 向 右 浮 动 
none 默认 值 。 元 素 不 浮动 ,并 会 显示 在 其 在 文本 中 出 现 的 位 置 
inherit 规定 应 该 从 父 元 素 继承 float 属性 的 值 


6. 水 平 导航 条 的 创建 方法 


有 两 种 创建 水 平 导 航 栏 的 方法 。 使 用 行内 或 浮动 列表 项 。 两 种 方法 都 不 错 ,如 果 希 
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望 链接 拥有 相同 的 尺寸 , 须 使 用 浮动 方法 。 构 建 水 平 导航 栏 的 方法 之 一 是 将 li 二 元 素 
规定 为 行内 元 素 ,语句 如 下 : 


li{display:inline;} a{display:block;width:60px;} 
为 了 让 所 有 链接 拥有 相等 的 宽度 ,浮动 二 li 二 元 素 并 规定 二 a 二 元 素 的 宽度 : 


li{float:left;} 
a{display:block;width:60px;} 


其 中 ,a{display:block;width:60px;) 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 单 击 ( 不 
仅仅 是 文本 ) ,同时 也 允许 规定 宽度 。 


228 定位 与 浮动 上 机 实验 样 例 
1. 实验 目标 
掌握 运用 浮动 制作 水 平 菜单 。 
2. 程序 功能 


建立 一 个 HTML 文档 ,运用 div ul\li\a 标签 ,结合 CSS, 引 用 float 属性 ,完成 水 平 
菜单 设计 任务 。 


3. 实验 步骤 
(1) 源 程序 -水 平 横向 菜单 . htm 


<html xmlns= "http://www.wW3.org/1999/xhtml"> 
<head> 
<title> 水 平 横向 菜单 < /title> 
< style type= "text/css"> 
#1ayout {background- color:#FFFFFF; height:300px; width:800px; border: 
2px solid #A9C9E2} 
#www{list— style- type:square;list— style- image:url (img/leaf .png) ;} 
#file{list- style- type:square;list- style- jimage:url (img/profile.png);} 
#email{list- style- type:square; list— style- image:url (img/search.png) ;} 
#telnet{list- style- type:square; list— style- image:url (img/tags.png);} 
#other{list-— style- type:square; list— style- image:url (img/truck.png);} 
a:hover{color:#f£00;} 
#1layout ul 1i {float: left;width: 140px;text-—align: center;} 
</style> 
< /head> 
<body> 
<div id= "layout'> 
<ul> 
<1i id='www'><a href= 哇 " target=" blank">WWW 服 务 </a></1i> 
<1i id 'file'><a href= 哇 " target=" blank"> 文 件 传输 服务 < /a>< /1i> 
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<1i id 'email'><a hre 伍 哇 " target=" blank"> 电 子 邮 件 服务 </a></1i> 
<1i id 'telnet'><a hre 会 啡 " target=" blank"> 远 程 登录 服务 < /a>< /1i> 
<1i id= 'other'><ahre 伟 啡 " target=" blank"> 其 他 服务 </a></1i> 

</ul> 
</div> 

< /body> 

</htm> 


(2) 在 浏览 器 中 浏览 


在 浏览 器 中 浏览 的 结果 如 图 2. 19 所 示 。 
(3) 在 浏览 器 的 查看 器 中 调试 运行 结果 


在 图 2. 37 所 示 的 浏览 器 中 按 F12 键 ,浏览 器 底部 弹出 开发 人 员工 具 界 面 ,选中 “ 查 
看 器 ”选项 卡 ,选择 第 一 个 #1layout ul li 元 素 , 鼠 标 指向 #1ayout ul li 规则 ,如 图 2. 38 所 


示 。 在 图 2.38 中 取消 #1layout ul li 规则 的 float 属性 后 ,界面 如 图 2. 39 所 示 。 重 新 选中 
float 属性 ,返回 到 图 2. 38 的 状态 。 


水 平 模 向 荣 间 区 
香 | @ localhost34734/ 源 权 序 / 文 验 /2-2 ” 国 蹊 C | Q 六 天 


个 | 自 旭 全 有 9- 人 闫 三 


日 x 官方 站 点 加 最 第 访问 上 火 购 官方 站 点 忆 新 手 上 路 由) 党 用 网 址 图 京东 商城 种 火 饭 主页 加 常用 网 址 图 京东 商城 。 站 移动 版 书签 





胃 WWW 服 务 。” 固 文件 传输 服务 ”电子 邮件 服务 ” 包 远程 登录 服务 。 购 其 他 服务 














图 2.37 水 平 横向 菜单 示例 


水 平 横向 伴 单 x 
香 ，@ localhost34734/ 而 尼 序 /实验 /2-2 国 躁 C | QQ 本 二 个 | 自 旧 请 罗 9 -日 天 三 
辐 WW 官方 站 点 加 最 委 沪 问 占 火狐 计 方 站 点 羽 新 手 上 路 唱和 染 用 网 址 图 京东 商城 全 火 肠 主页 加 党 用 网 址 图 京东 商城 
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用 WWW 服 务 。” 固 文件 传输 服务 ”Q 电子 邮件 服务 ”各 远程 登录 服务 。 典 其 他 服务 
守 | 二 的 Wt 性 内 存 网 DOM -| 下 -汉口 从 占 回 晶 
提要 HTML 人 





/Di http://eww v3 ore/ TN/zhtal! 
tonal dt 


/ure 到 





4 过 站 样式 
ore/1999/zhtal”> ED 





元 来 号 { 

1 

sayout mu O { 
float: left; 


vidth: 140pr; 
tert-align: center: 


list-strle-type: sure: 
Hist-strle-inage: mrl(imeyleaf cad); 
“| 
html » body » div alayout > ul > li#www | 





2.38 “查看 器 "中 查看 #layout ul li 样式 规则 


84 


Nsaiissnns 








所 ”Dlocalhost34734/ 源 各 序 / 妆 尝 /2-2 国 器 C | Q 闫 # 全 | 自 叶 人 请 多 D-H 三 





辐 x 官方 站 点 图 最 党 访 问 占 火狐 官方 站 点 莉 新 手 上 路 加 第 用 网 址 四 京东 商城 全 火 肠 主页 加 党 用 网 址 图 京东 商城 。 口 移动 版 书签 








re: 


bi id="email’y md/1i> iet-styleriaage: arl(iaeyleaf pog); 


bi sd="telnet "> /Ly 
html » body » div slayout » ul » li #www 





2.39 ”取消 “查看 器 ”中间 layout ul li 样式 规则 的 float 属性 后 


23 实验 任务 


1. 实验 题目 

基于 DIV 的 画图 首页 布局 。 

2. 程序 功能 

综合 利用 所 学 的 标签 和 CSS 设计 一 个 画图 网 页 , 含 横向 水 平 主 菜单 ` 纵 向 树 形 面板 





和 客户 区 。 横 向 水 平 主 菜单 含有 长 方形 、 圆 .菱形 正方形、 椭圆 5 个 菜单 项 。 纵 向 树 形 
面板 含有 线 型 .颜色 ,动静 3 个 选项 , 线 型 含有 实 线 、 虚 线 2 个子 项 ,颜色 有 红 、 绿 、 蓝 3 个 
子 项 ,动静 含有 动 和 静 2 个 子 选项 。 


3. 实验 类 型 

综合 设计 。 

4. 实验 要 求 

(1) 至 少 3 个 div, 分 别 为 主 菜单 区 、 树 形 面板 区 和 客户 区 ,使 用 绝对 定位 。 
(2) 比例 布局 合理 。 

(3) 含有 外 部 样式 、 内 由 样 式 和 行内 样式 。 


(4) 横向 水 平 菜单 均匀 等 间距 等 长 分 布 。 
(5) 各 个 菜单 项 均 含有 图 标 。 


ss 表单 与 CsS 


85 





5. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB、 主 频 1.8GHz 及 以 上 ,硬盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010 或 Adobe Dreamweaver。 

(4) 浏览 器 : IE8 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 


6. 实验 原理 


(1) 盒子 模型 。 
(2) 图 文 列表 。 
(3) 定位 与 浮动 。 


7. 源 代码 


(1) 辅 以 必要 的 注释 。 
(2) 错落 有 致 .结构 清晰 、 易 读 性 强 。 


8. 遇 到 的 问题 及 解决 办 法 


HTML 布局 


图 知识 目标 

。 掌握 布局 的 方式 .属性 和 工具 

。 理解 常用 的 布局 结构 

。 掌握 流 式 布局 

。 掌握 bootstrap 进行 布局 所 用 的 基本 控件 

图 能 力 目标 

。 能 够 根据 实际 需求 选择 恰当 的 布局 方式 、 结 构 
。 能 够 根据 实际 选取 合适 的 开发 工具 

。 能 够 灵活 运用 所 选 的 开发 工具 设计 切 题 的 .新 颖 的 .丰富 的 页 面 
国 素质 目标 

。 运用 bootstrap 快速 开发 响应 式 页 面 

图 教学 重点 

。 运用 Bootstrap 进行 布局 

图 教学 难点 

。 设计 精美 精致 精准 的 网 页 布局 

图 建议 学 时 

。 理论 : 3 学 时 

。 实验 ， 3 学 时 


31 概 还 


1. 布局 方式 


布局 有 自然 布局 、 响 应 布局 和 定位 布局 3 种 方式 。 自 然 布局 没有 任何 修饰 ,自动 靠 
。 响 应 布局 为 流动 布局 ,采用 浮动 方式 。 定 位 布局 有 相对 定位 和 绝对 定位 。 
相对 定位 和 绝对 定位 都 是 相对 于 父 div 标签 的 。 相 对 定位 以 这 个 元 素 本 来 应 该 在 的 
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relative, 所 以 如 果 里 层 是 absolute, 则 会 以 外 层 的 左上 角 为 位 移 参 考 对 齐 。 当 然 , 外 层 只 
写 position:relative, 写 上 left top 这 两 个 值 , 则 表示 以 这 个 元 素 本 来 应 该 在 的 位 置 为 布 
局 参照 原点 进行 left top 对 齐 。 

如 果 只 有 一 个 position:absolute, 外 层 没 有 position:relative, 此 时 的 处 理 原则 是 如 
果 某 父 级 元 素 中 有 relative, 则 以 某 父 级 元 素 为 参考 原点 ,如 果 没 有 position:relative, 则 
以 body 为 参考 原点 。 如 果 position:absolute 外 层 没有 relative, 这 两 个 布局 是 没有 区 
别 的 。 

最 后 ,如 果 外 层 是 position:absolute, 内 层 是 position:relative,absolute 会 参考 body 
为 布局 原点 ,relative 会 参考 它 本 来 应 该 在 的 位 置 为 布局 原点 ,其 实 是 参考 外 层 左 上 角 为 
布局 原点 。 


2. 布局 结构 


HTML5 有 3 种 典型 布局 结构 ,分 别 是 div-ulli\table-tr-td 和 frameset-frame。 div- 
ul-li 常用 于 分 类 导航 或 菜单 等 场合 。table-tr-td 常用 于 图 文 布局 或 显示 数据 的 场合 。 
frameset-frame 用 于 一 个 浏览 器 窗口 显示 多 个 网 页 。 


3. 布局 属性 


无 论 采用 何 种 布局 方式 和 布局 结构 ,都 涉及 表 3. 1 所 示 的 CSS 常用 布局 属性 功能 。 
表 3.1 CSS 布局 常用 属性 功能 












































属 性 功 能 
position 绝对 定位 样式 实现 DIV 定位 布局 , 值 设 为 absolute 或 relative 
width 宽度 ,设置 对 象 宽度 
height 高 度 , 设 置 对 象 高 度 
line-height 行 高 ,设置 文本 行 高 
left 设置 div 对 象 靠 左 距离 
right 设置 div 对 象 靠 左 距离 
top 设置 div 对 象 靠 左 距离 
bottom 设置 div 对 象 靠 左 距离 
background 背景 ,设置 背景 图 片 和 颜色 
color 设置 字体 颜色 
font-size 设置 字体 大 小 
font-weight 设置 字体 加 粗 
font-family 设置 字体 
4. 布局 工具 


布局 工具 有 div、table、frameset、.HTML5 新 元 素 和 Bootstrap。 前 三 者 为 HTML 标 
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签 ,而 Bootstrap 是 一 个 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 。 


32 divuli 布 局 实例 


一 个 典型 的 div 十 CSS 布局 实例 在 firefox 浏览 器 的 显示 效果 如 图 3. 1 所 示 。 


所 @ localhost1811/ 源 己 序 F 峡 骂 C QBR<Cu:k> » 三 
加 景 过 访问 上 火狐 言 方 站 点 区 新 手 上 路 剖 第 用 网 址 图 京东 商城 。。 口 移 动 设备 上 的 书 答 

















3.1 div 十 CSS 布局 实例 的 浏览 器 显示 


1. 实例 分 析 


(1) 选择 ul 十 li 列表 

此 CSS 十 DIV 布局 实例 是 典型 的 列表 型 布局 ,可 在 每 个 列表 项 li 的 上 面 放 一 个 图 
片 ,下 面 放 一 个 标题 。 

(2) 设置 图 片 盒 子 模型 

图 片 使 用 img 标签 ,宽度 160px、 高 度 90px、display 设 为 级 块 。 

(3) 设置 标题 盒子 模型 

标题 文字 使 用 span 盒子 包 庄 ,同时 设置 span 背景 色 .宽度 100%% ,高 度 30px .display 

(4) 设置 列表 项 li 盒子 模型 

list-style-type 为 none,float 为 left,padding 为 4px、8px,width 为 160px。 设 置 好 列 
表 项 li 宽度 并 且 浮 动 靠 左 ,可 让 列表 项 li 并 列 显示 ,一 排 显示 不 完 自 动 换行 ,继续 显示 列 
表 项 li 的 图 文 内 容 。 每 个 li 上 下 和 左右 各 有 相同 间距 ,使 用 内 边 距 padding 设置 列表 项 
的 间距 。 

(5) 设置 无 序列 表 ul 盒子 模型 

取消 无 序列 表 ul 的 内 边 距 padding 和 外 边 距 margin 的 默认 值 ,设置 其 padding 为 
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0px,margin 为 0px,width 为 528,overflow 为 hidden。 
2. 准备 图 片 素材 
将 图 片 放 入 img 文件 夹 。 
3. 详细 HTML 文档 


<html xmlns= "http://www-w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type= "text/css"> 
div.1layout {border:2px solid #CCCCCC; padding:3px; width:528px; 
height :256px;} 
ul.imglist{ padding:O0px;margin:0px; width:528px; overflow:hidden} 
ul.imglist li{ list- style- type:none; float:left; padding:4px 8px; 
width:160px} 
ul.imglist li img{ display:block; width:160px; height:90px} 
ul.imglist 1i span{display:block; width:100%; height:30px; line- 
height :30px; background:#F6F6F6; text-align:center;} 
</style> 
< /head> 
<body> 
<div class= "layout"> 
<ul class="imglist"> 
<1i> 
<a href="#" target=" blank"> 
< img src="img/W 2015-11- 2- 17- 20- 59.jpg" alt=""/> 
< span> 瓷 砖 展示 1< /span> 
</a> 
</1i> 
<Ti> 
<a href="#" target=" blank"> 
< img src="img/W 2015- 11- 2-17- 22- 54.jpg"” alt=""/> 
< span> 瓷 砖 展示 2< /span> 
</a> 
</1i> 
<1i> 
<a href="#" target=" blank"> 
<img src="img/W 2015- 11- 2-17-27- 4.jpg" alt=""/> 
< span> 瓷 砖 展示 3< /span> 
</a> 
bh 
<1i> 
<a href="#" target=" blank"> 
<img src="img/W 2015- 11- 2-17-33- 58.jpg" alt=""/> 
< span> 次 砖 展示 4< /span> 
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</a> 
</li> 
<1i> 
<a href="#" target=" blank"> 
<jmg src="img/W 2015- 11- 2-17- 34- 32.jpg"” alt=""/> 
< span> 瓷 砖 展示 5< /span> 
</a> 
</li> 
<li> 
<a href="#" target=" blank"> 
<img src="img/W 2015- 11- 2-17- 40- 22.jpg" alt=""/> 
< span> 瓷砖 展 示 6< /span> 


</a> 
< 人 > 
</ul> 
</div> 
< /body> 
</htm> 


4. 层 到 样式 表 CSS 解释 
(1) 无 序列 表 图 片 类 


ul.imglist{ padding:0px;margin:0px auto; width:528px; overflow:hidden} 


设置 padding:0px, 使 用 margin:0 auto, 让 ul 结构 布局 居中 ,使 用 overflow :hidden。 
这 样 可 以 解决 子 级 使 用 float 属性 产生 的 不 能 撑 开 问题 。 同 时 ,使 用 固定 宽度 width: 
528px(528 王 (160 十 8X2)X3) ,使 得 一 排 只 排 3 个 li。 

(2) 无 序列 表 图 片 类 列表 项 

ul.imglist 1i{ list- style- type:none; float:left; padding:4px 8px; width:160px} 

使 用 list-style-type:none 取消 标题 文字 的 项 目 符号 ;float:left, 让 1i 靠 左 开始 并 列 ; 
padding:4px 8px 设置 1 与 1 之 间 的 间距 ;width:160px 设置 固定 宽度 。 

(3) 无 序列 表 图 片 类 列表 项 中 的 图 片 

ul.imglist 1i img{ display:block; width:160px; height:90px} 


display:block 设置 图 片 独 占 一 行 ;width:160px; height:90px 设置 图 片 固定 高 度 宽 度 。 
(4) 无 序列 表 图 片 类 列表 项 中 行内 元 素 


ul.imglist 1i span{display:block; width:100%; height:30px; line- height:30px; background: 

#F6F6F6} 

display:block 让 span 设置 宽度 与 高 度 生效 时 ,文字 独占 一 行 效果 ;width:100%; 
height:30px; 设置 宽度 和 高 度 ,宽度 100% 会 继承 父 级 li 宽度 (等 于 160px 宽度 ) ,设置 
100% 宽 度 的 好 处 是 随 父 级 宽度 而 自动 计算 出 100% 宽 度 与 父 级 宽度 保持 一 致 ;line-height: 
30px; 设置 文字 在 30px 中 垂直 居中 ;background: #F6F6F6 设置 span 背景 颜色 。 
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5. HTML 关键 点 


使 用 ul 十 li 组合 列表 标签 布局 ,每 个 li 盒子 放 图 片 十 文字 标题 ,li 盒子 直接 使 用 a 超 
链接 标签 ,将 图 片 和 文字 内 容 包 庄 于 其 中 。 使 用 img 标签 引入 图 片 ,使 用 span 标签 显示 
标题 。span 与 img 形成 两 个 盒子 ,用 CSS 分 别 设置 独占 一 行 的 样式 (display:block), 避 
免 文 字 和 图 片 排 成 一 排 而 非 上 下 结构 。 


6. 浏览 器 调试 观察 


观察 1: div. layout 的 尺寸 。 
如 图 3. 2 所 示 ,div. layout 的 尺寸 为 538X266 ,根据 盒子 模型 : 538 王 528 十 (3 十 2) X 
2,266 一 256 十 (3 十 2) X2。 


过 localhost34734/ 源 程序 /于 辕 品 C |Q 六 条 » 
加 KW 官方 站 点 加 最 党 访问 加 火狐 官方 站 点 性 新 手 上 路 加 党 用 网 址 。 , 口 移 动 版 书签 











3.2 开发 人 员工 具 的 查看 器 观察 div. layout 尺寸 


观察 2: ul. imglist 的 尺寸 。 

如 图 3. 3 所 示 ,ul. imglist 的 尺寸 为 528X256 ,根据 盒子 模型 : 528 王 528 十 (0 十 0) X 
2,256 王 256 十 (0 十 0) X2。 

观察 3: 取消 ul. imglist 的 padding 设置 。 

如 图 3.4 所 示 , 取 消 ul. imglist 的 padding 设置 后 ,ul. imglist 向 右 偏 移 ,原因 是 取消 
后 浏览 器 采用 默认 的 ul. imglist 的 padding 设置 。 
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所 | localhost34734/ 洒 各 序 /天 国 器 C ||Q 着 和 
思 WN 启 方法 点 加 最 党 访问 四 火狐 官方 站 点 者 新 手 上 路 [ 党 用 网 址 » 











办 可 后 。 机。 棺 {篇 -全 内 J 络 bj -| 卓 - 渤 虽 亲 回 加 日 





‘DID/xhtal! -transitional. dtd”) 
<html zalns="http://we w3. org/1999/zhtel”> 
bP ead) 7 </head) 
thody> 
div class="larout”> 


body » div layout » ul imglist > ji » a 
| 现 则 计算 后 。 动画 字体 
过 需 样 式 








3.3 开发 人 员工 具 的 查看 器 观察 ul. imglist 尺寸 


http://localhost34734/ 源 程序 X 
所 localhost34734/ 源 得 序 / 理 抬 /第 3 童 。 峡 器 C || Q 赴 过 他 | 自 及 会 
辐 KW 官方 站 点 加 最 第 沪 问 加 火 弧 官方 站 点 辜 新 手 上 路 加 党 用 网 址 图 京东 商城 图 火狐 主页 » 口 移动 版 书 答 




















JDOCTTPE htal PUBLIC “CVDID HMM 1.0 
ttp-Nwwr wa org/TR/zhtal 
人 tal zalne="http://w 3. org/1: 





html » body > div Jayout > ul imglist > li > a 





3.4 ”取消 ul. imglist 的 padding 设置 后 浏览 器 的 显示 
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33 table-trtd 布局 实例 


一 个 典型 的 table 十 CSS 布局 实例 在 firefox 浏览 器 的 显示 效果 如 图 3.5 所 示 。 


htpyfiocalhest34734/ 基 导 打 XX 


3-Table 而 局 


火 甩 言 方 站 点 鲁 六 手 上 渤 回味 用 网 福 加 头痛 三 各 义 姑 主页 


WELCOME MESSAGE 


This Home Page layout makes a great starting point for your website. Virtually all of the content is 
customizable, including the images, the text and the links. You can decide whether to keep the existing 
graphics or swap them out for pictures of your own 


The text on this page is intended to help you jumpstart your design by suggesting the sort of content you 
may want to include, but don't let it limit you, The same is also true for the link text - feel free to change the| 
names of the links to better suit your particular needs. If you have any questions about using Contribute to 
edit these pages, refer to the Read Me file included with the download or to the Contribute Help System 
Have fun and make a great website! 


图 3.5 Table 十 CSS 布局 实例 的 浏览 器 显示 


1. 实例 分 析 


本 实例 的 分 区 均 基 于 表 进 行 ,无 论 一 级 分 区 还 是 二 级 分 区 。 一 级 分 区 指 直接 隶属 于 


body 元 素 的 table, 该 表 被 称 为 主 表 。 二 级 分 区 指 隶 属于 主 表 内 一 个 td 里 的 表 。 
(1) 一 级 分 区 


图 3.5 所 示 的 网 页 从 上 向 下 分 项 部 标题 和 logo 区 、 横 分 隔 、 操 作 展 示 区 。 操 作 展 示 
区 从 左 向 右 分 纵向 菜单 区 、 纵 分 隔 、 文 本 展示 区 。 因 此 , 主 表 分 块 设计 如 图 3.6 所 示 。 主 





表 各 区 行列 分 配 情况 如 表 3.2 所 示 。 




















标题 
logo - 本 是 图 片 
提示 
横 分 隔 
纵 | 纵 文本 展示 区 
各 | 分 
菜 | 隔 





加 长 炎 

















图 3.6 主 Table 分 块 设计 
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表 3.2 主 表 各 区 行列 分 配 情况 
































区 名 行 数 /跨行 列 数 / 跨 列 

logo 2/ 是 2/ 是 
标题 1/ 否 2/ 是 
提示 1/ 是 2/ 是 
图 片 2/ 是 1/ 否 
横 分 隔 5/ 否 5/ 是 
纵向 菜单 区 1/ 否 1/ 否 
纵 分 隔 1/ 否 1/ 否 
文本 展示 区 1/ 否 3/ 是 
(2) 二 级 分 区 


纵向 分 隔 区 和 文本 展示 区 运用 二 级 分 区 进行 细 化 。 纵 向 分 隔 区 用 表 占 5 行 1 列 。 
每 行 显示 一 个 菜单 项 。 每 个 td 的 border-bottom 显示 为 1px, 起 到 下 划 线 的 效果 。 文 本 
展示 区 用 表 占 2 行 1 列 。 第 1 行为 标题 ,第 2 行 含 2 个 段落 元 素 。 


2. 准备 图 片 素材 
将 图 片 放 入 img 文件 夹 。 
3. 详细 HTML 文档 


<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
<style type= "text/css"> 
body { margin:O0px; } 
#logo { 
font:17px Arial, Helvetica, sans- serif; 
color: white; 
letter- spacing: .5em; 
line- height:30px; 
} 
#tagline { 
font:18px Arial, Helvetica, sans- serif; 
color: white; 
letter-— spacing: .2em; 
line- height:14px; 
} 
#navigation td { border- bottom: 1px solid #FF9900 } 


#navigationa { 


font:20px Arial，Helvetica，sans- serif; 
Color: #FF9900; 
line- height:16px; 
letter- spacing: .lem; 
text- decoration: none; 
display:block; 
pagdding:8px 6px 8px 22px; 
} 

#navigation a:hover { 
Color:black; 
font- weight :bold; 
background- color: #FFFACD; 
} 

.pageName, .bodyText {color: white;} 

</style> 
</head> 
<body style= "background- color:#7e0202"> 
<table cellspacing= "0" cellpadding= "0"> 

<tr bgcolor= "#220103"> 

<td width= "215" rowspan= "2" colspan= "2"> 
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< img src="img/1.jpg" alt="Header image" width="215" height= "108" 





border=" 
</td> 

< td width="355" colspan: 

valign= "bottom"> 


0™ /> 





<pre> 欢迎 进入 Table 布局 世界 < /pre> 


</td> 
<td width= "176" rowspan= "2"> 


height="54" nowrap= "nowrap" id= "logo" 


< img src="img/2.jpg" alt="header image 2" width="185" height= "108" 


border= "0"/> 


< img src="img/3.jpg" alt="header image 2" width="185" height= 


border= "0"/> 


< img src="img/4.jpg" alt="header image 2" width="185" height= 


border= "0"/> 
</td> 
</tr> 
<tr bgcolor= "#220103"> 


<td height= "54" colspan= "2" nowrap= "nowrap" id= "tagline" 


valign= "top"> 
<pre> 潜心 钻研 , 乐 在 其 中 < /pre> 
</td> 
</tr> 


<tr bgcolor= "#FF080E">< td colspan= "5" style= "height: 2px"></td> 


</tr> 


nl108m 


nl108m 
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<tr bgcolor= "#FF9900"> < td colspan= "5" style= "height: 1]px">< /td> 
</tr> 
< tr bgcolor="#FF080E"> < td colspan= "5" style="height: 18px">< /td> 六 


<tr bgcolor= "#FF9900"> < td colspan= "5" style= "height: lpx">< /td> 
</tr> 

<tr bgcolor= "#FF080E">< td colspan= "5" style= "height: 2px">< /td> 
</tr> 


<td width="170" height= "700" valign= "top" id= "navborder"><br /> 


<table border= "0" cellspacing= "0" cellpadding= "0" width= 

"170" id= "navigation"> 
<tr><td width="165"><a href="" class= "navText">ABOUT US< /a>< 
/td>< /tr> 
<tr><td width="165"><a href="" class= "navText"> THE SPA</a></ 
ta>< /tr> 
<tr><td width="165"><a href="" class= "navText"> TREATMENTS< /a 
></td> 
</tr> 
<tr><td width="165"><a href="" class= "navText"> CLASSES< /a></ 
td>< /tr> 
<tr><td width="165"><a href="" class= "navText"> CONTACT< /a></ 
td>< /tr> 

</table> 


</td> 
<td width= "45">< /td> 
<td width= "100%" colspan= "3" valign= "top"> 


<br/><br/><br/> 
< table border="0" cellspacing="0" cellpadding="0" width= "100%" 
style="background— color: # 7e0202; font: 20px Arial, Helvetica, 
sans- serif; "> 
区 
<td class= "pageName"> WELCOME MESSAGE< /td> 
i 
区 村人 
<td class= "bodyText"> 
<p> This Home Page layout makes a great starting point for 
your website. Virtually all of the content jis 
Customizable, including the images, the text, and the 
links. You can decide whether to keep the existing 
graphics or swap them out for pictures of your own. 
</p> 
<p> The text on this page is intended to help you jumpstart 
your design by suggesting the sort of content you may 
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want to include, but don't let 让 limit you. The same is 
also true for the link text- feel free to change the 
names of the links to better suit your particular needs. 
If you have any questions about using Contribute to edit 
these pages, refer to the Read Me file included with the 
download or to the Contribute Help System. Have fun and 
make a great website! 


</p> 
</td> 
</tr> 
</table> 
<br/><br/> 
</td> 
</tr> 
< /table> 

< /body> 

</htm> 

4. 知识 点 


(1) 过 td> 标签 的 nowrap 属性 

规定 单元 格 中 的 内 容 不 换行 ,属性 行为 与 table ,td 的 width 属性 无 关 。 

(2) em 

em 指 字 体高 ,任意 浏览 器 的 默认 字体 高 都 是 16px, lem 二 16px。 那 么 , 12px 一 
0.75em,10px 一 0.625em。 为 了 简化 font-size 的 换算 ,需要 在 CSS 中 的 body 选择 器 中 声 
明 Font-size 二 62.5% ,这 就 使 em 值 变 为 16px * 62. 5% 二 10px, 这 样 12px 一 1. 2em,10px 一 
lem, 也 就 是 说 只 需要 将 原来 的 px 数值 除 以 10 ,然后 换 上 em 作为 单位 就 行 了 。em 有 如 
下 特点 : 

@D em 值 并 不 是 固定 的 。 

@ em 继承 父 级 元 素 字体 大 小 。 


5. 技术 要 点 


(1) 表格 总 宽度 不 固定 ,具体 宽度 由 单元 格 100%% 的 列 设置 补充 ,整个 宽度 充满 
屏幕 。 

(2) 页 边 距 在 样式 表 中 由 标签 body 设置 。 

(3) 字体 在 样式 表 中 由 标签 并 logo、#tagline 设置 。 

(4) 布局 表格 属性 在 网 页 中 设置 二 table border 王 "0" cellspacing 王 "0"”cellpadding 一 
"0">, 

(5) 在 单元 格 中 插入 图 片 时 ,单元 格 的 宽度 应 该 由 图 片 宽度 决定 ,两 个 图 片 的 高 度 应 
该 一 致 。 

(6) 背景 在 二 body 盖 标签 中 设置 二 body style 王 "background-color: #7e0202 放 ,也 
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可 使 用 二 body bgcolor 二 "#990000" background 王 "mm_bg_red. gif" 之 设置。 
34 frameset 布局 帘 例 


1. 基础 知识 


使 用 框架 可 以 在 同一 个 浏览 器 窗口 中 显示 多 个 页 面 。 每 份 HTML 文档 称 为 一 个 框 
架 , 并 且 每 个 框架 都 独立 于 其 他 框架 。 使 用 框架 的 缺点 是 开发 人 员 必 须 同 时 跟踪 更 多 的 
HTML 文档 ,而 且 很 难 打印 整 张 页 面 。 

框架 结构 标签 (二 frameset 二 ) 定 义 如 何 将 窗口 分 割 为 框架 。 每 个 frameset 定义 了 
一 系列 行 或 列 , rows/columns 的 值 规定 了 每 行 或 每 列 占 据 屏 幕 的 面积 。 框架 标签 
(Frame) 签 定义 了 放置 在 每 个 框架 中 的 HTML 文档 。 在 frameset 里 使 用 iframe 来 实现 
常规 的 一 些 分 栏 布局 ,可 以 借助 一 个 页 面 承载 多 个 页 面 的 方式 来 重用 页 面 代码 。 一 个 页 
面 中 的 iframe 之 间 可 以 互相 实现 关联 ,而 且 不 需要 过 多 依靠 JavaScript 就 可 以 实现 类 似 
“局 部 ”刷新 的 机 制 。 要 让 不 同 iframe 之 间 的 dom 元 素 产生 互动 和 关联 ,需要 JavaScript 
程序 复杂 程度 较 高 ,而 且 有 些 根 本 实现 不 了 (比如 拖 忠 、 用 户 自 定制 页 面 布 局 等 )。 一 个 
页 面 承载 多 个 页 面 的 HTTP 请 求 , 实 现 类 似 局 部 刷新 的 效果 ,不 是 后 台 运 行 请 求 机 制 ,而 
是 前 台 浏 览 器 刷新 机 制 , 会 有 延迟 的 响应 ,而 且 无 法 对 响应 进行 控制 (比如 loading 或 者 
一 些 响应 状态 的 监听 )。Frameset 适用 于 具有 固定 布局 的 系统 ,但 HTML 5 已 不 支持 这 
个 标签 。 

下 面 的 例子 中 设置 了 一 个 两 列 的 框架 集 。 第 一 列 被 设置 为 占据 浏览 器 窗口 的 25%。 
第 二 列 被 设置 为 占据 浏览 器 窗口 的 75%。HTML 文档 "frame_a. htm" 被 置 于 第 一 个 列 
中 ,而 HTML 文档 "frame_b. htm" 被 置 于 第 二 个 列 中 。 


< frameset cols= "25%, 75%"> 
< frame src= "frame a.htm"> 
< frame src= "frame b.htm"> 


< /frameset> 


假如 一 个 框架 有 可 见 边框 ,可 以 拖 动 边 框 来 改变 它 的 大 小 。 为 了 避免 这 种 情况 发 
生 , 可 以 在 二 frame> 标签 中 加 入 noresize 一 "noresize"。 

iframe 用 于 在 网 页 内 显示 网 页 。 添 加 iframe 的 语法 是 二 iframe src 一 "URL" 二 
< 到 /iframe 二 ,URL 指向 隔离 页 面 的 位 置 。Iframe 可 设置 高 度 和 宽度 ,由 height 和 width 
属性 规定 属性 值 ,属性 值 的 默认 单位 是 像素 ,但 也 可 以 用 百分比 来 设 定 ( 比 如 "80%")。 
例如 : 





<iframe src= "demo iframe.htm" width= "200" height= "200">< /iframe> 


Iframe 能 够 显示 或 隐藏 边框 ,由 frameborder 属性 控制 ,设置 属性 值 为 "0" 就 可 以 移 
除 边 框 ,设置 为 非 0 显示 边框 。 例 如 : 


<iframe Src= "demo iframe.htm" frameborder="0"></iframe> 
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iframe 可 用 做 链接 的 目标 (target) ,由 target 和 name 属性 联合 控制 。 例 如 : 


<iframe Src= "demo iframe.htm" name= "iframe a"></iframe> 
<p><a href= "http://www.w3school .com.cn" target="iframe an">W3School.com.cn 


</a></p> 


2. 布局 实例 
一 个 典型 的 frameset 布局 实例 在 firefox 浏览 器 的 显示 效果 如 图 3.7 所 示 。 


| 
* 号 三 


专 QIocalhost1611REH/SIE/ 生 ] 事 H 时 喷 C QEE-Cri> 全 自 吕 全 多 性 
DS 上 的 


局 axa Me FL A 国 和 现时 


( 这 里 是 头 部 ) 牡丹 亭 





(左边 ) ( 右边 前 两 句 ) 
原来 巡 紫 尹 红 开 遍 











《牡丹 亭 》 
作者 : 汤 显 祖 。 | 似 这 般 都 付 与 断 井 颓 垣 
前 两 句 
后 两 句 
(底部 ) 《 皂 罗 袍 》 
图 3.7 frameset 布局 实例 
1) 实例 分 析 


本 实例 进行 两 级 分 区 ,一 级 分 区 为 主 frameset, 把 浏览 器 水 平分 隔 成 三 行 ,分 别 占 浏 
览 器 的 15%、75% 和 10%。 二 级 分 区 是 把 第 二 行 垂直 分 成 左右 两 部 分 ,分 别 占 25% 和 
75%。 二 级 分 区 的 左边 至 少 合 有 如 图 3.7 所 示 的 内 容 , 其 中 前 两 名 和 后 两 句 为 超 链接 ， 
链接 HTML 文档 目标 为 本 分 区 的 右边 部 分 。 

2) 详细 HTML 文档 


有 6 个 html 文 档 文件 ,文件 名 分 别 为 3-4-Frameset. htm top. htm left. htm,right. 
htm、bottom. htm 和 myright. htm。3-4-Frameset. htm 为 主 索引 文件 ,是 本 实例 的 入 口 


文件 。 


(1) 3-4-Frameset. htm 


< !DOCTYPE HTML PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
< frameset rows= "1]5%,75%,10%"> 
<frame name= "top" src= "top.htm" /><-- 拥 有 15s 的 高 度 --> 
<frameset cols= "25%,75s"><- -拥有 75s 的 高 度 --> 
<frame name= "left" src="left.htm"><-- 拥 有 25s 的 宽度 --> 
< frame name= "right" src= "right.htm"><- -拥有 75s 的 宽度 --> 
</frameset> 


<frame name= "bottom" src= "bottom.htm" /><-- 拥 有 10s 的 高 度 --> 


</frameset> 
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</html> 
(2) top. htm 


< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http- equiv= "Content-Type" content= "text/html; charset=UTF- 8"> 
<title> freamset—— top< /title> 
< /head> 
<body> 
<div style= "text- align:center;color:blue; font- size:50px"> (这 里 是 头 部 ) 牡 丹 亭 
</div> 
< /body> 
</html> 


(3) left. htm 


< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http- equiv= "Content— Type" content= "text/html; charset=UTF- 8"> 
<title> freamset—— left< /title> 
< /head> 
<body> 
<div style= "color:blue;font- size:30px"> (左边 ) 
<br /> 
《牡丹 亭 》 
<br/> 
作者 : 汤 显 祖 
<br/> 
<a target= "right" href= "right.htm"> 前 两 句 < /a><br/> 
<a target= "right" href="myright.htm"> 后 两 句 < /a> 
</div> 
< /body> 
</htm> 


(4) right. htm 


< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtmll1- transitional.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=UTF- 8"> 
<title> freamset—— right< /title> 
< /head> 
<body> 
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<div style= "color:blue; font- size:30px"> (右边 前 两 句 ) 
<br/> 
原来 姥 紫 嫣红 开 遍 
<br/> 
似 这 般 都 付 与 断 井 巴士 
</div> 
< /body> 
< /html> 


(5) bottom. htm 


< !DOCTYPE HTML PUBLIC "- //W3C//DTD HIML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=UTF- 8"> 
<title> freamset— -bottom /title> 
< /head> 


<body> 
<div style= "text- align:center;color:blue;font- size:30px"> (底部 ) 
《 皂 罗 袍 》 
</div> 
< /body> 
</html> 


(6) myright. htm 


< I!DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtmlL1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=UTF- 8"> 
<title> freamset——myright< /title> 
< /head> 
<body> 
<div style="color:blue;font- size:30px"> (右边 后 两 句 ) 
<br/> 
良 展 美景 奈何 天 
<br/> 
赏 心 乐事 谁 家 院 
</div> 
< /body> 
</html> 


3) 技术 要 点 
(1) frameset 不 能 和 body 同时 使 用 。 
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(2) <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional// 
EN" 二 表示 HTML 版 本 为 4.01。 
(3) 凡是 frameset 所 在 的 HTML 文档 ,版 本 不 能 为 HTML5。 


3.5 Bootstrap 布局 实例 


1. 概述 


Bootstrap 是 一 个 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框 架 。Bootstrap 基于 
HTML、CSS、 JavaScript, 是 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发 的 。 
Bootstrap 是 2011 年 8 月 在 GitHub 上 发 布 的 开源 产品 。 自 Bootstrap 3 起 ,框架 包含 了 
贯穿 整个 库 的 移动 设备 优先 的 样式 。 目 前 .所 有 的 主流 浏览 器 都 支持 Bootstrap。 
Bootstrap 的 响应 式 CSS 能 够 自 适应 于 台式 机 ,平板 电脑 和 手机 。 它 为 开发 人 员 创建 接 
口 提 供 了 一 个 简洁 统一 的 解决 方案 ,包含 了 功能 强大 的 内 置 组 件 ,易于 定制 ,提供 了 基于 
Web 的 定制 ,是 开源 的 。Bootstrap 包 的 内 容 如 下 。 

1) 基本 结构 

Bootstrap 提供 了 一 个 带 有 网 格 系统 .链接 样 式 .背景 的 基本 结构 。 这 将 在 Bootstrap 
基本 结构 部 分 详细 讲解 。 

2 C88 

Bootstrap 自 带 特性 为 : 全 局 的 CSS 设置 .定义 基本 的 HTML 元 素 样式 、 可 扩展 的 
class 以 及 一 个 先进 的 网 格 系统 。 这 将 在 Bootstrap CSS 部 分 详细 讲解 。 

3) 组 件 

Bootstrap 包含 十 几 个 可 重用 的 组 件 , 用 于 创建 图 像 .下 拉 菜 单 . 导航、 警告 框 、. 弹 出 
框 等 。 这 将 在 布局 组 件 部 分 详细 讲解 。 

4) 插件 

Bootstrap 包含 十 几 个 自 定义 的 jQuery 插件 ,读者 可 以 直接 包含 所 有 的 插件 ,也 可 以 
逐个 包含 这 些 插件 。 

5) 定制 

可 以 定制 Bootstrap 的 组 件 .LESS 变量 和 jQuery 插件 来 得 到 读者 的 版 本 。 


2. 布局 实例 


图 3. 8 所 示 为 Bootstrap 布局 实例 。 

1) 实例 分 析 

在 body 标签 中 ,使 用 Bootstrap 提供 的 Container 类 创建 一 个 块 级 div 元 素 , 作 为 页 
面 放置 其 他 元 素 的 外 层 容 器 。 在 这 个 外 层 容器 中 添加 一 级 标题 Hl 元 素 , 作 为 网 页 的 一 
级 标题 。 

使 用 Bootstrap 提供 的 nav 元 素 创 建 水 平 主导 航 条 ,由 主导 航 条 组 织 导航 菜单 项 。 
在 Bootstrap 中 ,导航 条 类 为 navbar, 用 于 在 容器 中 添加 导航 条 。 导 航 条 类 默认 底 色 为 白 








人 4] Deaihosa47ayBB5/ 呈 过 MISS 加 距 四 C IQs |] 食 | 自 本 会 则 的- 与 天 


辐 Ka 祝 方 站 点 圆 最 委 访 问 卓 火狐 官方 站 点 全 新 手 上 小 加 所 用 网 址 加 京东 商城 全 炙 狐 主页 加 所用 网 址 四 京东 商城 口 移动 版 书签 


Twitter bootstrap tutorial 


Main Content Section Sidebar 


WASHINGTON - Former President Barack Obama praised protesters who amassed across the country in 
opposition to President Donald Trump's immigration orders, breaking his silence on political issues for the 
first time since leaving office "The presicent fundamentally disagrees with the notion of discriminating 
against individuals because of therr faith or religion,” Obama's spokesman, Kevin Lewis, sald 


Another Link 1 
Another Link 2 


In his first statement on behalf of the former president, Lewis said Obama was "heartened" by the amount Another Link 3 
of engagement taking place in US communities. Lewis, a former White House official, pointed out that 

Obama used his last official speech as president to talk about Americans respon sibiity to be "guardians of 

our democracy," even in nonelection years. 





3.8 ”Bootstrap 布局 实例 (视窗 宽 宇 768px) 


色 , 利 用 navbar-inverse 反 白 类 设置 反 显 。 导 航 条 由 ul 无 序列 表 元 素 组 织 实际 导航 内 
容 , 由 nav 导航 类 说 明 一 组 导航 ,而 由 navbar-nav 类 说 明 导 航 条 中 的 导航 。 列 表 项 1i 是 
实际 的 导航 项 目 ,可 以 使 用 active 来 说 明 当 前 活动 的 导航 。 由 navbar-collapse 类 设置 ， 
在 视窗 宽度 小 于 768px 时 将 导航 变 成 垂直 方向 ,如 图 3.9 所 示 。 


3-5-bootstrap 4 
过 | localhost34734/ 淹 得 序 /理论 国 跟 加 C ||Q 可 素 他 | 自 时 会 多 9 » 三 
日 KW 记 方 站 点 加 最 党 访问 加 火 驾 计 方 站 点 莉 新 手 上 路 上 第 用 网 址 图 京东 商城 名 火 莪 主页 口 党 用 网 址 > 品 移 动 版 书签 


Twitter bootstrap tutorial 


Main Content Section 


WASHINGTON - Former President Barack Obama praised protesters who amassed across the country in 
opposition to President Donald Trump's immigration orders, breaking his silence on political issues for the first 


time since leaving office. "The president fundamentally disagrees with the notion of discriminating against 
individuals because of their faith or religion,” Obama's spokesman, Kevin Lewis, said 


In his first statement on behalf of the former president, Lewis said Obama was "heartened" by the amount of 
engagement taking place in US communities. Lewis, a former White House official, pointed out that Obama 
used his last official speech as president to talk about Americans' respon sibilty to be "guardians of our 
democracy" even in nonelection years 


Sidebar 


Another Link 1 
Another Link 2 


Another Link 3 
localhost:34734/ 源 程序 /理论 /第 3 章 -HTML 布 局 /3-5-bootstrap/3-5-bootstrap.htm# 


图 3.9 Bootstrap 布局 实例 (视窗 宽 二 768px) 
主要 内 容 部 分 使 用 类 名 为 content 的 div 来 布局 。 这 里 使 用 bootstrap 栅 格 布局 , 栅 


格 系统 利用 12 列 布局 ,意味 着 一 个 页 面 可 以 被 分 隔 成 12 个 相同 列 。 在 侧 边栏 中 添加 一 
些 导航 内 容 。 普 通 导 航 使 用 nav 类 进行 声明 ,nav-tabs 和 nav-stacked 是 导航 的 外 观 的 2 








104 neaisssnns 





个 外 观 类 。 
2) 详细 的 HTML 文档 


< !DOCTYPE html> 
<html> 
<head> 
<meta name= "viewport" content="width=device-width, initial- scale=1"/> 


<title> 3- 5-bootstrap< /title> 
<1link href= "bootstrap- 3.3.7- dist/css/bootstrap- theme.min.css" 


rel= "stylesheet" type= "text/css" /> 
< link href= "bootstrap- 3.3.7- dist/css/bootstrap.min.css" 
rel= "stylesheet" type= "text/css" /> 
<style type= "text/css"> 
.nav-tabs { border: lpx solid #ddd;margin- bottom:- 3px; } 
</style> 
< /head> 
<body> 
<div class= "container"> 
<hl> Twitter bootstrap tutorial< /hl> 
<nav class= "navbar navbar- inverse"> 
<div id= "navbar- menu" class= "navbar- collapse"> 
<ul class= "nav navbar- nav"> 
<1i class= "active"><a href="#">Home< /a>< /1i> 
<1i><a href="#"> Page One< /a>< /1i> 


<1i><a href="#"> Page Two< /a>< /1i> 


</ul> 
</div> 


< /nav> 
<div id= "content" class= "row- fluid"> 


<div class="col-md- 9"> 
<h2>Main Content Section< /h2> 
<pre>< /pre> 
</div> 
<div class= "col-md- 3"> 
<h2> Sidebar< /h2> 


<ul class= "nav nav- stacked"> 
<1i class= "nav-tabs"><a href= '# ">Rnother Link 1</a></1i> 


<1i class="nav-tabs"><a href= '#'>Another Link 2< /a></1i> 
<1i class= "nav- tabs"><a href= '#'>Another Link 3</a></1i> 


</ul> 
</div> 
</div> 


</div> 
<script src="jquery-1.3.2.min.js" type= "text/javascript">< /script> 
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< script src= "bootstrap- 3.3.7- dist/js/bootstrap.min.js" 
type= "text/javascript">< /script> 
< /body> 
</htm> 


36 HTIML5 新 元 泰 布局 实例 


HTML5 提供 的 新 语义 元 素 定 义 了 网 页 的 不 同 部 分 ,如 表 3. 3 所 示 。 
表 3.3 HTMLS 布局 新 元 素 














标 签 描 述 标 签 描 述 
header 定义 文档 或 节 的 页 眉 aside 定义 内 容 之 外 的 内 容 ( 比 如 侧 栏 ? 
nav 定义 导航 链接 的 容器 footer 定义 文档 或 节 的 页 脚 
section 定义 文档 中 的 节 details 定义 额外 的 细节 
article 定义 独立 的 自 包 含 文章 summary | 定义 details 元 素 的 标题 














应 用 HTML5 新 元 素 进行 布局 的 实例 效果 如 图 3. 10 所 示 。 


http://localhost:3473. X 
D localhost34 入 | 辕 喇 C ||Q 夫 素 
加 火 多 官方 站 点 加 最 第 访问 | 火狐 官方 站 点 二 新 手 上 路 


City Gallery 


London 


London is the capital city of England. It is the 
most populous city in the United Kingdom, 
with a metropolitan area of over 13 million 
inhabitants. 


Standing on the River Thames, London has 
been a major settlement for two millennia, its 
history going back to its founding by the 
Romans, who named it Londinium. 





3.10 ”HTML 新 元 素 布 局 实例 
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完整 的 HTML 文档 如 下 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title></title> 
<style type= "text/css"> 
header { 
background- color:black; 
color:white; 
text- align:center; 
padding:5px; 


nav { 
line- height :30px; 
background- color:#eeeeee; 
height:300px; 
width:100px; 
float:left; 
padding:5px; 
} 
section { width:350px; float:left; padding:10px; } 
footer { 
background- color:black; 
color:white; 
clear:both; 
text- align:center; 
pagding:5px; 
ul{ padding- left:0px;margin- left:6px;} 
ul>1i{list- style- type:none; } 


</style> 
< /head> 
<body> 
<header><hl> City Gallery< /hl> < /header> 
<nav> 
<ul> 
<1i><a href="#">London< /a></li> 
<li><a href="#">Paris</a></li> 
<1i><a href="#">Tokyo< /a>< /li> 
</u> 
</nav> 
< section> 
<hl> London< /hl> 


<p> 
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London is the capital city of England. It is the most populous city in the 
United Kingdom, with a metropolitan area of over 13 million inhabitants. 
</p> 
<p> 
Standing on the River Thames, London has been a major settlement for two 
millennia, its history going back to its founding by the Romans, who named 


it Londinium. 
</p> 
</section> 
<footer>HTML5 实用 网 页 开发 技术 < /footer> 
< /body> 
</htm> 
37 实验 任务 

1. 实验 题目 


运用 Bootstrap 实现 首页 流 式 布局 。 

2. 程序 功能 

综合 利用 所 学 的 标签 和 CSS 设计 一 个 画图 网 页 , 含 横向 水 平 主 菜 单 、 纵 向 树 形 面 板 
和 客户 区 。 横 向 水 平 主 菜单 含有 长 方形 、 圆 、 萎 形 、 正 方形 、 李 圆 5 个 菜单 项 。 纵 向 树 形 
面板 含有 线 型 .颜色 ,动静 3 个 选项 , 线 型 含有 实 线 、 虚 线 2 个 子 项 ,颜色 含有 红 、 绿 、 蓝 3 
个 子 项 ,动静 含有 动 和 静 2 个 子 选项 。 

3. 实验 类 型 

综合 设计 。 

4. 实验 要 求 

(1) 运用 bootstrap 实现 流 式 布局 ,以 适用 于 PC、PAD 和 和 手机。 

(2) 比例 布局 合理 。 

(3) 仅 运用 内 嵌 样 式 。 


(4) 横向 水 平 菜单 均匀 等 间距 等 长 分 布 。 
(5) 纵向 菜单 项 均 含 有 图 标 ,横向 水 平 菜单 项 不 用 图 标 。 


5. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB.、 主 频 1.8GHz 及 以 上 硬盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010 或 Adobe Dreamweaver。 


108 nenisssnns 





(4) 浏览 器 : IE9 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 
6. 实验 原理 


(1) 图 文 列表 与 浮动 。 
(2) Bootstrap 开源 控件 。 


7. 源 代 码 


(1) 辅 以 必要 的 注释 。 
(2) 错落 有 致 ,结构 清晰 , 易 读 性 强 。 


8. 遇 到 的 问题 及 解决 办 法 


JavaScript 


图 知识 目标 

。 掌握 JavaScript 基础 知识 

。 理解 JavaScript 的 基本 特点 

。 掌握 JavaScript 的 用 途 

国 能 力 目标 

。 能 够 应 用 JavaScript 设计 动态 HTML 页 面 

。 能 够 准确 迅速 对 JavaScript 程序 错误 进行 初步 判定 跟踪、 调试 
。 能 够 对 程序 异常 进行 捕获 和 输出 

图 素质 目标 

。 娴熟 地 单 拍 跟踪 调试 .变量 监视 . 断 点 设置 和 异常 捕获 

图 教学 重点 

。 面向 对 象 的 JavaScript 程序 设计 

。 跟踪 调试 与 异常 捕获 

图 教学 难点 

。 根据 运行 错误 恰当 设置 断 点 ,进行 单 拍 跟踪 调试 

图 建议 学 时 

。 理论 : CC++ .Java 或 C 革 开设 在 先 ,建议 2 学 时 ,教师 讲述 要 点 ,学 生 自学 细节 
。 实验 : 4 学 时 


41 和 阐 介 


JavaScript 是 一 种 直译 式 脚本 语言 ,是 一 种 动态 类 型 . 弱 类 型 .基于 原型 的 语言 ,内 置 
支持 类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ,为 浏览 器 的 一 部 分 ,广泛 用 于 客户 端的 脚 
本 语言 ,最 早 是 在 HTML( 标 准 通 用 标记 语言 下 的 一 个 应 用 ) 网 页 上 使 用 ,用 来 给 HTML 
网 页 增加 动态 功能 。 
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1. 组 成 


(1) ECMAScript: 描述 了 该 语言 的 语法 和 基本 对 象 。 
(2) 文档 对 象 模 型 (DOM) : 描述 处 理 网 页 内 容 的 方法 和 接口 。 
(3) 浏览 器 对 象 模型 (BOM) : 描述 与 浏览 器 进行 交互 的 方法 和 接口 。 


2. 特点 


JavaScript 是 一 种 属于 网 络 的 脚本 语言 ,已 经 被 广泛 用 于 Web 应 用 开发 ,常用 来 为 
网 页 添加 各 式 各 样 的 动态 功能 ,为 用 户 提供 更 流畅 美观 的 浏览 效果 。 通 常 ,JavaScript 脚 
本 是 通过 牛人 HTML 中 来 实现 自身 的 功能 的 ,其 基本 特点 如 下 : 

(1) 解释 性 : 它 是 一 种 解释 性 脚本 语言 (代码 不 进行 预 编 译 ) ,可 以 直接 嵌入 HTML 
页 面 , 也 可 写成 单独 的 js 文件 (有 利于 结构 和 行为 的 分 离 ) 。 

(2) 动态 性 : 主要 用 来 向 HTML 页 面 添 加 交互 行为 ,JavaScript 是 一 种 采用 事件 驱 
动 的 脚本 语言 , 它 不 需要 经 过 Web 服务 器 就 可 以 对 输入 、 输 出 、 和 鼠标、 键盘 、 加 载 .、 定 时 等 
事件 进行 响应 。 

(3) 平台 无 关 性 : 在 绝 大 多 数 浏 览 器 的 支持 下 ,可 以 在 多 种 平台 (如 Windows、 
Linux、Mac、Android.\iOS 等 ) 下 运行 ;不 同 于 服务 器 端 脚本 语言 ,例如 PHP 与 ASP， 
JavaScript 主要 被 作为 客户 端 脚 本 语言 ,在 用 户 的 浏览 器 上 运行 ,不 需要 服务 器 的 支持 。 
所 以 ,早期 程序 员 比 较 青睐 JavaScript, 以 减少 对 服务 器 的 负担 。 

(4) 面向 对 象 : JavaScript 是 一 种 基于 对 象 的 脚本 语言 , 它 不 仅 可 以 创建 对 象 ,也 能 
使 用 现 有 的 对 象 。 

(5) 简单 易学 : JavaScript 语言 中 采用 的 是 弱 类 型 的 变量 类 型 ,对 使 用 的 数据 类 型 未 
做 出 严格 的 要 求 ,是 基于 Java 基本 语句 和 控制 的 脚本 语言 ,其 设计 简单 紧凑 。 

(6) 安全 性 : 浏览 器 脚本 程序 安全 性 低 。 随 着 服务 器 的 强壮 性 增强 ,安全 程序 可 运 
行 于 服务 端的 脚本 ,但 JavaScript 仍然 以 其 跨 平台 、 容 易 上 手 等 优势 大 行 其 道 。 同 时 ,有 
些 特殊 功能 (如 Ajax) 必 须 依赖 JavaScript 在 客户 端 支持 。 随 着 引擎 (如 V8) 和 框架 (如 
Node. js) 的 发 展 及 其 事件 驱动 及 异步 IO 等 特性 ,JavaScript 逐渐 被 用 来 编写 服务 器 端 
程序 。 


3. 用 途 


Javascript 脚本 语言 同 其 他 语言 一 样 ,有 其 自身 的 基本 数据 类 型 .表达 式 和 算术 运算 
符 及 程序 的 基本 程序 框架 。Javascript 提供 了 4 种 基本 的 数据 类 型 和 2 种 特殊 数据 类 
型 ,用 来 处 理 数据 和 文字 。 而 变量 提供 存放 信息 的 地 方 , 表 达 式 则 可 以 完成 较 复杂 的 信 
息 处 理工 作 。 其 日 常用 途 如 下 : 

(1) 在 HTML 页 面 戏 人 动态 文本 。 

(2) 对 浏览 器 事件 做 出 响应 。 

(3) 读 写 HTML 元 素 。 

(4) 在 数据 被 提交 到 服务 器 之 前 验证 数据 。 
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(5) 检测 访客 的 浏览 器 信息 。 
(6) 控制 Cookies, 包 括 创 建 和 修改 等 。 
(7) 基于 Node. js 技术 进行 服务 器 端 编程 。 


4. 实现 


从 理论 上 讲 , 可 以 在 HTML 文档 中 放 入 不 限 数 量 的 脚本 。 而 实际 中 ,过 多 的 脚本 处 
理 不 当 使 网 页 加 载 变 慢 。 脚 本 由 单独 的 script 元 素 标识 ,类 似 于 CSS, 可 以 在 所 需 的 
HTML 文档 里 编写 ,也 可 以 由 外 部 文件 导入 。 

(1) 一 script 二 标签 

HTML 脚本 位 于 二 script 过 与 二 /script> 标签 之 间 。 脚 本 可 被 放置 在 二 body 过 或 
二 head> 部 分 中 。 通 常 的 做 法 是 把 函数 放 入 所 head 二 部 分 中 ,或 者 放 在 页 面 底部 。 这 样 
就 可 以 把 它们 安置 到 同一 处 位 置 ,不 会 干扰 页 面 的 内 容 。 所 script 之 和 二 /script 二 会 告 
JavaScript 在 何 处 开始 和 结束 。 志 script 二 和 到 /script 二 之 间 的 代码 行 包 含 了 
JavaScript, 例如 : 


<script>alert ("My First JavaScript") ;< /script> 


低 版 本 的 浏览 器 实例 可 能 会 在 二 script 二 标签 中 使 用 type= "text/javascript", 现 已 
不 必 如 此 。JavaScript 是 所 有 现代 浏览 器 以 及 HTML5 中 的 默认 脚本 语言 。 

把 一 个 JavaScript 函数 放置 到 HTML 页 面 的 王 head 过 部 分 ,如 例 4-1-1-1 所 示 , 该 函 
数 会 在 单 击 按钮 时 被 调用 。 同 样 , 放 在 二 body 二 部 分 如 例 4-1-1-2 所 示 。 

例 4-1-1-1 JavaScript 函数 放置 到 HTML 页 面 的 过 head 之 部 分 示例 。 


< !DOCTYPE html"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
< Script type= "text/javascript"> 
function myFunction() { 
document .getElementById ("demo") . innerHTML=" 我 的 第 一 个 Javascript 也 


数 "; 
} 
</script> 
< /head> 
<body> 


<hl> 我 的 Web 页 面 < /hl> 
<p id= "demo"> 一 个 段落 < /p> 
<button type= "button" onclick= "myFunction() "> 尝试 一 下 < /button> 
< /body> 
</htm> 
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例 4-1-1-2 JavaScript 函数 放置 到 HTML 页 面 的 天 body 过 部 分 示例 。 


< IDOCTYPE html"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 
<hl> 我 的 Web 页面 < /hl> 
<p id= "demo"> 一 个 段落 < /p> 
<button type= "button" onclick= "myFunction ()"> 尝 试 一 下 </button> 
</body> 
<Script type= "text/javascript"> 
function myFunction() { 
document .getElementById ("demo") . innerHTML=" 我 的 第 一 个 Javascript 天 
数 "7 
} 
</script> 
</html> 


可 以 把 脚本 保存 到 外 部 文件 中 。 外 部 文件 通常 是 被 多 个 网 页 引用 的 脚本 。 外 部 
JavaScript 文件 的 文件 扩展 名 是 . js。 如 需 使 用 外 部 文件 ,请 在 二 script 二 标签 的 "sre" 属 
性 中 设置 该 .js 文件 ,如 例 4-1-1-3 所 示 。 

例 4-1-1-3 放置 到 外 部 文件 的 JavaScript 函数 示例 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title>< /title> 
<script src=" 例 4-1-1-3.js" type= "text/javascript"></script> 
</head> 
<body> 
<hl> 我 的 Web 页 面 < /hl> 
<p id= "demo"> 一 个 段落 < /p> 
<button type= "button" onclick= "myFunction()"> 尝 试 一 下 < /button> 
< /body> 
</html> 


外 部 脚本 文件 名 为 : 例 4-1-1-3.js, 所 含 内 容 如 下 : 


function myFunction() 
{ 

document .getElementById ("demo") .innerHTMI= "我 的 第 一 个 Javascript 函数 "; 
} 


注意 : 外 部 脚本 文件 内 容 不 必 、 也 不 能 包含 二 script> 标签 。 
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(2) 简单 功能 
@ 写 人 HTML 输出 。 


document .write ("<hl> This is a heading< /hl>"); 
document .write ("<p> This is a paragraph< /p> "); 


@ 对 事件 做 出 反应 。 
<button type= "button" onclick= "alert ('Welcome!')"> 单 击 这 里 < /button> 


@ 改变 HTML 内 容 


x= document .getElementById ("demo") // 查 找 元 素 
Xx.innerHTMI= "Hello JavaScript"; // 改 变 内 容 


@ 改变 HTML 样式 。 


x= document .getElementById ("demo") // 找 到 元 素 
Xx.style.color="#f£f£0000"; // 改 变样 式 
5. 输出 


JavaScript 没有 任何 打印 或 者 输出 的 函数 。JavaScript 可 以 通过 如 下 4 种 不 同方 式 
来 输出 数据 : 

。 使 用 window. alert() 弹 出 警告 框 。 

。 使 用 document. write() 方 法 ,将 内 容 写 到 HTML 文档 中 。 

。 使 用 innerHTML 写 入 HTML 元 素 。 

。 使 用 console. log() 写 入 浏览 器 的 控制 台 。 

(1) 使 用 window. alert() 

可 以 弹出 警告 框 来 显示 数据 ,如 例 4-1-1-4 所 示 。 

例 4-1-1-4 使 用 window. alert() 弹 出 警告 框 示例 。 


< !DOCTYPE html> 


<html> 
<head>< /head> 
<body> 
<hl> 我 的 第 一 个 页 面 < /hl> 
<p> 我 的 第 一 个 段落 。< /p> 
<Script type= "text/javascript"> 
Window.alert (5+ 6) 7 
</script> 
< /body> 
</htm> 


(2) 操作 HTML 元 素 
如 需 从 JavaScript 访问 某 个 HTML 元 素 . 可 以 使 用 document. getElementById(id) 
方法 ,操纵 由 "id" 属 性 标识 的 HTML 元 素 , 从 innerHTML 来 获取 ,或 向 innerHTML 插 
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入 元 素 内 容 , 如 例 4-1-1-5 所 示 。 
例 4-1-1-5 JavaScript 操作 HTML 元 素 示例 。 


< !DOCTYPE html> 
<html> 
<head><title>< /title>< /head> 
<body> 
<hl> 我 的 第 一 个 Web 页 面 < /hl> 
<p id= "demo"> 我 的 第 一 个 段落 </p> 
< script type= "text/javascript"> 
document .getElementById ("demo") .innerHTML= "段落 已 修改 。"; 
</script> 
< /body> 
</html> 


以 上 JavaScript 语句 (在 二 script 二 标签 中 ) 可 以 在 Web 浏览 器 中 执行 。document. 
getElementById(" demo") 是 使 用 id 属性 来 查找 HTML 元 素 的 JavaScript 代码 。 
innerHTML=" 段 落 已 修改 ." 是 用 于 修改 元 素 的 HTML 内 容 (innerHTML) 的 
JavaScript 代码 。 

(3) 写 到 HTML 文档 

可 以 将 JavaScript 直接 写 在 HTML 文档 中 ,如 例 4-1-1-6 所 示 。 

例 4-1-1-6 ， JavaScript 修改 HTML 文档 示例 。 


< !DOCTYPE html> 

<html> 
<head><title>< /title>< /head> 
<body> 
<hl> 我 的 第 一 个 Web 页面 < /hl> 
<p> 我 的 第 一 个 段落 。</p> 
<Script type= "text/javascript"> 

document .write (Date ()) 7 

</script> 
< /body> 

</htm> 


如 果 在 文档 完成 加 载 后 执行 document. write, 整 个 HTML 页 面 将 被 覆盖 ,如 例 4-1-1-7 
所 示 。 
例 4-1-1-7 被 例 4-1-1-6 修改 后 的 HTML 文档 。 


< !DOCTYPE html> 
<html> 
<head><title></title>< /head> 
<body> 
<hl> 我 的 第 一 个 Web 页 面 < /hl> 
<p> 我 的 第 一 个 段落 。</p> 
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<button onclick= "myFunction () "> 点 我 < /button> 
<sScript type= "text/javascript"> function myFunction () { document.write (Date 
())7 }</script> 
< /body> 
</htm> 


(4) 写 到 控制 台 
对 于 支持 调试 的 浏览 器 ,可 以 使 用 console. log() 方 法 在 浏览 器 中 显示 JavaScript 值 。 


< !DOCTYPE html> 
<html> 
<head><title>< /title>< /head> 
<body> 
<hl> 我 的 第 一 个 Web 页面 < /hl> 
<Script type= "text/javascript"> 
a=5; 
b=6; 
C=at+b; 
console.1log(c); 
</script> 
< /body> 
</htm> 


浏览 器 显示 后 , 按 F12 键 启用 开发 人 员工 具 , 进 入 调试 模式 ,在 调试 窗口 中 单 击 “ 控 
制 台 ”菜单 项 ,选中 “日 志 ” 标 签 卡 ,如 图 4. 1 所 示 。 


€) @ localhost34734/ 源 程 。 转 品 CG | QBRE<Cvk> | 3 三 
辐 XB 官 方 站 点 加 最 常 访问 口 火狐 官方 站 点 攻 新 手 上 路 > 口 移动 版 书签 


我 的 第 一 个 Web 页 面 


时 查 . | 经 -| 王 。 梯 (人 mW ol-| 四 -汉中 从 回回 日 
位 |® SY -|© Css -9 :8 -| © 安全 UW) -| 日 日 志 U -| | 日 服 务 器 G) -| 过 注 光 出 


WEAXEENEB4-1-8. htm:10:13 

















4.1 浏览 器 控制 台 输出 数据 
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42 理论 基 策 


421 语法 


JavaScript 是 一 种 程序 语言 。 语 法 规则 定义 了 语言 结构 。JavaScript 是 一 个 脚本 语 
。 它 是 一 种 轻 量 级 但 功能 强大 的 编程 语言 。 


1. JavaScript 字面 量 


3 中 


在 编程 语言 中 ,一 个 字面 量 是 一 个 常量 ,如 3.14。 数 字 字 面 量 可 以 是 整数 或 小 数 ,或 
者 是 科学 计数 (e) 。 如 3. 14、1001 或 123e5。 字 符 串 字面 量 使 用 单 引 号 或 双 引 号 括 起 来 ， 
如 "John Doe" John Doe'。 表 达 式 字面 量 用 于 计算 ,如 5 十 6、5 * 10。 数 组 字面 量 定义 一 
个 数组 ,用 方 括号 括 起 来 ,如 [40,100,1,5,25,10]。 对 象 字面 量 定 义 一 个 对 象 ,用 花 括号 
把 属性 名 值 对 括 起 来 ,属性 名 值 对 用 有 逗号 分 隔 , 属 性 名 和 值 用 冒号 匹配 ,如 {firstName: 
"John", lastName:"Doe", age:50, eyeColor:"blue"}。 了 函数 字面 量 定义 一 个 函数 ,如 


function myFunction(a, b) { returna * b;)。 

2. JavaScript 变量 

在 编程 语言 中 ,变量 用 于 存储 数据 值 。JavaScript 使 用 关键 字 var 来 定义 变量 ,使 用 
等 号 来 为 变量 赋值 ,如 : 


Var x, length; 
X=5; 
length= 6; 


变量 可 以 通过 变量 名 访问 。 在 指令 式 语言 中 ,变量 通常 是 可 变 的 。 字 面 量 是 一 个 恒 
定 的 值 。 
3. JavaScript 操作 符 


JavaScript 使 用 算术 运算 符 来 计算 值 .如 (5 十 6) * 10。JavaScript 使 用 赋值 运算 符 给 
变量 赋值 ,如 : 


X=5; 
FG 
z= (x+y) * 10; 


JavaScript 语言 有 多 种 类 型 的 运算 符 , 包 括 赋值 .算术 位、 条件、 比较 及 逻辑 运算 符 。 
4. JavaScript 语句 
在 HTML 中 ,JavaScript 语句 向 浏览 器 发 出 命令 。 语 句 用 分 号 分 隔 , 如 : 


X=5+6; 
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y=x * 10; 
5. JavaScript 关键 字 


JavaScript 关键 字 用 于 标识 要 执行 的 操作 。var 关键 字 告 诉 浏览 器 创建 一 个 新 的 变 
量 , 如 日 


Var x=5+6; 

Var y=x * 10; 

和 其 他 任何 编程 语言 一 样 ,JavaScript 保留 了 一 些 关 键 字 ,为 自己 所 用 。JavaScript 
同样 保留 了 一 些 关 键 字 ,这 些 关键 字 在 当前 的 语言 版 本 中 并 没有 使 用 ,但 在 以 后 的 
JavaScript 扩展 中 会 用 到 。JavaScript 关键 字 必须 以 字母 .下 夯 线 (_) 或 美元 符 ($ ) 开 始 。 
后 续 的 字符 可 以 是 字母 数字、 下面 线 或 美元 符 ( 数 字 是 不 允许 作为 首 字 符 出 现 的 ,以 便 
JavaScript 可 以 轻易 区 分 关键 字 和 数字 ) 。 

以 下 是 JavaScript 中 最 重要 的 保留 字 ( 按 字母 顺序 ) 。 


abstract else instanceof ,super, boolean .enum ,int\switch 、break .export \interface、 





Synchronized byte extends let this ,case ,false long throw 等 。 
6. JavaScript 注释 


不 是 所 有 的 JavaScript 语句 都 是 “命令 "。 双 和 斜 枉 // 后 的 内 容 将 会 被 浏览 器 忽略 ， 
例如 : 


// 我 不 会 执行 
7. JavaScript 数据 类 型 


JavaScript 有 多 种 数据 类 型 ,包括 数字 、 字 符 串 、 数 组 .对象 等 。 在 编程 语言 中 ,数据 
类 型 是 一 个 非常 重要 的 内 容 。 为 了 可 以 操作 变量 ,了 解数 据 类 型 的 概念 非常 重要 。 如 果 
没有 使 用 数据 类 型 ,以 下 实例 将 无 法 执行 : 


16 +"Hello" 


16 加 上 "Hello" 会 输出 : "16Hello"。 
8. JavaScript 函数 


JavaScript 语句 可 以 写 在 函数 内 ,函数 可 以 重复 引用 。 引 用 一 个 函数 等 同 于 调用 函 
数 (执行 函数 内 的 语句 )。 函 数 定义 如 下 : 





function myFunction(a, b) { 
returna * b; // 返 回 a 乘 于 b 的 结果 


9. JavaScript 对 大 小 写 敏 感 
JavaScript 对 大 小 写 是 敏感 的 。 编 写 JavaScript 语句 时 ,请 留意 是 否 关闭 大 小 写 切 
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换 键 。 函 数 getElementById 与 getElementbyID 不 同 。 同样, 变量 myVariable 与 
MyVariable 也 不 同 。 


422 语句 

JavaScript 语句 是 向 浏览 器 发 出 的 命令 。 语 句 的 作用 是 告诉 浏览 器 该 做 什么 。 下 面 
的 JavaScript 语句 向 id 二 "demo" 的 HTML 元 素 输出 文本 "你 好 Dolly"。 

document .getElementById ("demo") .innerHTMI=" 你 好 Dolly"; 

1. 分 号 

分 号 用 于 分 隔 JavaScript 语句 。 通 常 .每 条 可 执行 的 语句 结尾 添加 分 号 。 分 号 的 另 
一 用 处 是 在 一 行 中 编写 多 条 语句 。 例 如 : 


a 
b=6; 


C=atb; 

以 上 实例 也 可 以 写成 

a=5; b=6; c=atb; 

在 JavaScript 中 ,用 分 号 来 结束 语句 是 可 选 的 。 

2. JavaScript 代码 

JavaScript 代码 是 JavaScript 语句 的 序列 。 浏 览 器 按照 编写 顺序 依次 执行 每 条 语 
句 。 以 下 2 个 语句 顺序 执行 。 


document .getElementById ("demo") .innerHTML= "你 好 Dolly"; 
document .getElementById ("myDIV") .innerHTML= "你 最 近 怎 么 样 ?"; 


3. JavaScript 代码 块 


JavaScript 可 以 分 批 地 组 合 起 来 。 代 码 块 以 左 花 括号 开始 ,以 右 花 括号 结束 。 代 码 
块 的 作用 是 一 并 地 执行 语句 序列 。 以 下 所 示 代 码 块 作为 一 个 函数 体 运行 。 


function myFunction() 

和 
document .getElementById ("demo") .innerHTMI 一 "你 好 Dolly"; 
document .getElementById ("myDIV") .innerHTML= "你 最 近 怎 么 样 2"; 


4. JavaScript 语句 标识 笃 


JavaScript 语句 通常 以 一 个 语句 标识 符 为 开始 ,并 执行 该 语句 。 语 句 标识 符 是 保留 
关键 字 ,不 能 作为 变量 名 、 函 数 名 、 对 象 名 或 数组 名 使 用 。 
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5. 空格 


JavaScript 会 忽略 多 余 的 空格 。 可 以 向 脚本 添加 空格 ,以 提高 语句 可 读 性 。 下 面 的 
两 行 代码 是 等 效 的 : 


var person= "Hege"; 


Var person = "Hege"; 
6. 对 代码 行进 行 折 行 
可 以 在 文本 字符 串 中 使 用 反 斜 杠 ,对 代码 行进 行 换行 。 下 面 的 例子 会 正确 地 显示 。 


document .write ("你 好 \ 
世界 1"); 


423 变量 
变量 是 用 于 存储 信息 的 “容器 "。 例 如 : 


Var x=5; 

Var y=6; 

Var 2=x+y; 

变量 运算 就 像 代数 运算 那样 ,使 用 字母 (比如 x) 来 保存 值 (比如 5)。 通 过 上 面 的 表 
达 式 z 二 x 十 y, 能 够 计算 出 z 的 值 为 11。 在 JavaScript 中 ,这 些 字母 被 称 为 变量 。 变 量 可 
以 使 用 短 名 称 ( 比 如 x 和 y), 也 可 以 使 用 描述 性 更 好 的 名 称 ( 比 如 age、 sum、 
totalvolume) 。 变 量 必须 以 字母 开头 ,也 能 以 $ 和 _ 符 号 开头 。 变 量 名 称 对 大 小 写 敏感 (y 
和 YY 是 不 同 的 变量 )。 

JavaScript 变量 还 能 保存 其 他 数据 类 型 ,比如 文本 值 (name 二 "Bill Gates")。 在 
JavaScript 中 ,类 似 "Bill Gates" 这 样 一 条 文本 被 称 为 字符 串 。 当 向 变量 分 配 文本 值 时 ,应 
该 用 双 引 号 或 单 引号 包围 这 个 值 。 当 向 变量 赋 的 值 是 数值 时 ,不 要 使 用 引号 。 如 果 用 引 
号 包围 数值 ,该 值 会 被 作为 文本 来 处 理 。 例 如 : 


var pi=3.14; 
Var person= "John Doe"™; 


Var answer= 'Yes I am!'; 


在 JavaScript 中 创建 变量 ,通常 称 为 “声明 ”变量 。 使 用 var 关键 词 来 声明 变量 ， 
例如 : 


变量 声明 之 后 ,该 变量 是 空 的 ( 它 没有 值 )。 如 需 向 变量 赋值 ,使 用 等 号 ,例如 : 
carname= "Hello™"; 


不 过 ,也 可 以 在 声明 变量 时 对 其 赋值 ,如 
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Var carname= "Hello"; 


下 面 的 例子 创建 了 名 为 carname 的 变量 ,并 向 其 赋值 " Hello" ,然后 把 它 放 入 id 三 
"demo" 的 HTML 段落 中 。 

<p id= "demo">< /p> 

Var carname= "Hello"; 


document .getElementById ("demo") .innerHTMI~ carname; 


一 个 好 的 编程 习惯 是 ,在 代码 开始 处 统一 对 需要 的 变量 进行 声明 。 可 以 在 一 条 语句 
中 声明 很 多 变量 。 该 语句 以 var 开头 ,并 使 用 逗号 分 隔 变 量 。 


Var lastname= "Doe", age= 30, job= "carpenter"; 
声明 也 可 横 跨 多 行 ,例如 : 


Var lastname= "Doe", 

age= 30, 

job= "carpenter"; 

计算 机 程序 中 经 常会 声明 无 值 的 变量 。 未 使 用 值 来 声明 的 变量 ,其 值 实际 是 
undefined 。 

执行 过 以 下 语句 后 ,变量 carname 的 值 将 是 undefined 。 


Var Carnamey7 


如 果 重 新 声明 JavaScript 变量 ,该 变量 的 值 不 会 丢失 。 以 下 两 条 语句 执行 后 ,变量 
carname 的 值 依然 是 "Hello"。 


Var carname= "Hello"; 


可 以 通过 JavaScript 变量 来 做 算数 ,使 用 的 是 = 和 十 这 类 运算 符 , 例 如 : 


5; 
X=y+2; 


424 数据 类 型 


JavaScript 的 数据 类 型 有 字符 串 数字. 布尔、 数组 ,对象 、 空 、 未 定义 。JavaScript 变 
量 拥有 动态 类 型 ,这 意味 着 相同 的 变量 可 用 做 不 同 的 类 型 ,例如 : 


Var x; //x 为 undefined 
Var X=5; // 现 在 x 为 数字 
var X= "John"; // 现 在 x 为 字符 串 
1. 字符 串 


字符 串 是 存储 字符 (比如 "Bill Gates") 的 变量 。 字 符 串 可 以 是 引号 中 的 任意 文本 。 
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可 以 使 用 单 引号 或 双 引 号 ,例如 : 


Var carname= "Hello HTML5 JS"7 


Var carname= 'Hello HTML5 JS"; 
可 以 在 字符 串 中 使 用 引号 ,只 要 与 包围 字符 串 的 引号 不 匹配 即 可 ,例如 : 


var answer="It's all right"; 
var answer= "He is called 'Johnny'"; 


var answer= 'He is called "Johnny"'; 


2. 数值 

JavaScript 只 有 一 种 数字 类 型 。 数 字 可 以 带 小 数 点 ,也 可 以 不 带 , 例 如 : 
Var x1=34.00; // 使 用 小 数 点 来 写 

Var x2=34; //// 不 使 用 小 数 点 来 写 

极 大 或 极 小 的 数字 可 以 通过 科学 (指数 ) 计 数 法 来 书写 ,例如 : 

var y= 123e5; //12300000 

Var 2=123e- 5; //0.00123 

3. 布尔 


布尔 (逻辑 ) 只 能 有 两 个 值 : true 或 false, 例 如 : 


Var x=true; 


Var y= false; 


布尔 常用 在 条 件 测试 中 。 
4. 数组 
数组 可 以 用 new Array() 赋 值 语句 申请 ,而 后 按 分 量 赋值 ,例如 : 





Var cars=new Rrray () 7 
cars [0]= "Saab"7 
cars[1]="Hello"; 


cars[2]= "BMW"; 


Var cars=new Array ("Saab", "Hello", "BMW"); 


Var cars= ["Saab", "Hello", "BMW"]; 


数组 下 标 是 基于 0 的 ,所 以 第 一 个 项 目 是 [0], 第 二 个 是 [1] ,以 此 类 推 。 
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5, 对 象 

对 象 由 花 括号 分 隔 。 在 括号 内 部 ,对 象 的 属性 以 名 称 和 值 对 的 形式 (name :value) 
来 定义 。 属 性 由 逗号 分 隔 ,例如 : 

var person= {firstname:"John", lastname:"Doe", id:5566}; 

上 面 例子 中 的 对 象 (person) 有 3 个 属性 : firstname \lastname 以 及 id。 

空格 和 折 行 无 关 紧 要 。 声 明 可 横 跨 多 行 : 


Var person= { 
firstname : "John", 
lastname : "Doe", 
id: 5566 

}; 


对 象 属性 有 如 下 两 种 寻 址 方式 : 


name= person.lastname; 
name= person["lastname"]; 


6. Undefined 和 Null 


Undefined 这 个 值 表示 变量 不 含有 值 。 可 以 通过 将 变量 的 值 设置 为 null 来 清空 变 
量 。 例 如 : 


cars=null; 


person=null; 
7. 声明 变量 类 型 
声明 新 变量 时 ,可 以 使 用 关键 词 new 来 声明 其 类 型 ,例如 : 





var carname=new String; 
Var x=new Number; 

Var y=new Boolean; 

Var cars= new Array; 


Var person=new Object; 


JavaScript 变量 均 为 对 象 。 声 明 一 个 变量 后 ,就 创建 了 一 个 新 的 对 象 。 
425 对 象 


JavaScript 对 象 是 拥有 属性 和 方法 的 数据 。 真 实生 活 中 的 对 象 有 属性 和 方法 。 如 一 
辆 汽车 是 一 个 对 象 ,有 重量 和 颜色 等 属性 ,有 启动 停止 等 方法 ,如 表 4.1 所 示 。 

所 有 汽车 都 有 这 些 属性 ,但 每 款 车 的 属性 值 都 不 尽 相同 。 所 有 汽车 都 拥有 这 些 方 
法 ,但 它们 被 执行 的 时 间 都 不 尽 相同 。 
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表 4.1 汽车 的 属性 和 方法 

















属 性 方 法 属 性 方 法 
car. name 一 Fiat car. start() car. weight 一 850kg car. brake() 
car. model 一 500 car. drive() car. color= white car. stop() 





在 JavaScript 中 ,几乎 所 有 的 事物 都 是 对 象 。 以 下 代码 为 变量 car 设置 值 为 Fiat， 
例如 : 


Var car= "Fiat"; 

对 象 也 是 一 个 变量 ,但 对 象 可 以 包含 多 个 值 (多 个 变量 ) ,例如 : 

var car= {type:"Fiat", model:500, color:"white"}; 

在 上 例 中 ,3 个 值 被 ("Fiat"，500,"white") 赋 予 变 量 car。 

1. 定义 

因此 ,JavaScript 对 象 是 变量 的 容器 。 可 以 使 用 字符 来 定义 和 创建 JavaScript 对 象 ， 


var person= {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 
定义 JavaScript 对 象 可 以 跨越 多 行 ,空格 跟 换行 不 是 必需 的 ,例如 : 


Var person= { 
firstName:"John", 
lastName:"Doe", 
age:50, 
eyeColor: "blue" 

}; 


可 以 说 ,JavaScript 对 象 是 变量 的 容器 。 进 一 步 说 ,javaScript 对 象 是 键 值 对 的 容器 。 
键 值 对 的 通常 写法 为 name : value( 键 与 值 以 冒号 分 隔 ) 。 键 值 对 在 JavaScript 对 象 中 通 
常 称 为 对 象 属性 。 


2. 访问 对 象 属性 
可 以 通过 如 下 两 种 方式 访问 对 象 属性 : 


person.1lastName; 


person["lastName"]; 
3. 访问 对 象 方法 


对 象 的 方法 定义 了 一 个 函数 ,并 作为 对 象 的 属性 存储 。 对 象 方法 通过 添加 () 调 用 
(作为 一 个 函数 )。 例 如 : 
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name= person.fullName (); 


如 果 要 访问 person 对 象 的 fullName 属性 , 它 将 作为 一 个 定义 函数 的 字符 串 返回 ,如 
下 所 示 : 


name= person. fullName; 

可 以 使 用 以 下 语法 创建 对 象 方法 : 
methodName : function() { code lines } 
可 以 使 用 以 下 语法 访问 对 象 方法 : 
objectName .methodName () 


通常 ,fullName() 是 作为 person 对 象 的 一 个 方法 ,fullName 是 作为 一 个 属性 。 
有 多 种 方式 可 以 创建 ,使 用 和 修改 JavaScript 对 象 。 同 样 也 有 多 种 方式 创建 .使 用 和 
修改 属性 和 方法 。 


426 函数 


函数 是 由 事件 驱动 ,或 者 当 函 数 被 调用 时 执行 的 可 重复 使 用 的 代码 块 ,如 例 4-2-6-1 
所 示 。 
例 4-2-6-1 一 个 简单 的 单 击 事件 。 


< !DOCTYPE html> 
<html> 
<head> 
<title></title> 
< script type= "text/javascript"> 
function myFunction() { 
alert ("Hello World!"); 
} 
</script> 
< /head> 
<body> 
<button onclick= "myFunction()">Try it< /button> 
< /body> 
</htm> 


1. 语法 
函数 就 是 包 右 在 花 括号 中 的 代码 块 ,前 面 使 用 了 关键 词 function, 如 下 所 示 : 
function functionname (){ 执行 代码 } 


调用 该 函数 时 ,会 执行 函数 内 的 代码 。 可 以 在 某 事件 发 生 时 直接 调用 函数 (比如 当 
用 户 单 击 按钮 时 ) ,并 且 可 由 JavaScript 在 任何 位 置 调用 。JavaScript 对 大 小 写 敏 感 。 关 
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键 词 function 必须 小 写 , 并 且 必 须 以 与 函数 名 称 相同 的 大 小 写 来 调用 函数 。 
2. 参数 


调用 函数 时 ,可 以 向 其 传递 值 ,这 些 值 被 称 为 参数 。 这 些 参数 可 以 在 函数 中 使 用 。 
可 以 发 送 任意 多 的 参数 , 形 参 置 于 ( 〇 内 , 形 参 间 用 逗号 分 隔 , 如 下 所 示 : 





myFunction (argument1，argument2) 
声明 函数 时 ,把 参数 作为 变量 来 声明 ,如 下 所 示 : 
function myFunction (varl,var2){ 代码 } 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 给 定 的 
值 , 以 此 类 推 , 如 例 4-2-6-2 所 示 。 
例 4-2-6-2 带 参 数 的 函数 调用 示例 。 


< !DOCTYPE html> 
<html> 
<head> 
<title>< /title> 
< Script type= "text/javascript"> 
function myFunction (name, job) { 
alert ("Welcome "+name+", the "+job); 
} 
</script> 
< /head> 
<body> 
<pP> 单 击 这 个 按钮 ,来 调用 带 参 数 的 函数 。< /p> 
<button onclick= "myFunction ("Harry Potter', 'Wizard')"> 单 击 这 里 
</button> 
< /body> 
</html> 


上 面 的 函数 在 按钮 被 单 击 时 会 提示 "Welcome Harry Potter, the Wizard"。 函 数 很 
灵活 ,可 以 使 用 不 同 的 参数 调用 该 函数 ,这 样 就 会 给 出 不 同 的 消息 。 


3. 返回 值 


有 时 需要 函数 将 值 返回 给 调用 者 ,使 用 return 语句 就 可 以 实现 。 使 用 return 语句 
时 ,函数 会 停止 执行 ,并 返回 指定 的 值 。 如 下 所 示 : 


function myFunction() 
{ 
Var x 57 


return x; 
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上 面 的 函数 返回 值 5 后 ,myFunction 函数 停止 运行 ,返回 到 myFunction 函数 的 调用 


处 继续 执行 代码 。 函 数 调用 将 被 返回 值 取代 ,如 下 所 示 : 


时 
里 ， 


Wi 


Var myVar=myFEunction ()7 


myVar 变量 的 值 是 5, 也 就 是 函数 myFunction() 所 返回 的 值 。 即 使 不 把 它 保 存 为 变 
也 可 以 使 用 返回 值 ,例如 : 


document .getElementById ("demo") .innerHTIMI— myFunction(); 


"demo" 元 素 的 innerHTML 将 成 为 5, 也 就 是 函数 myFunction() 所 返回 的 值 。 可 以 


于 传递 到 函数 中 的 参数 计算 返回 值 .例如 : 





function myFunction (a,b) 
{ 
return ax b; 


} 
document .getElementById ("demo") .innerHTIMI—=myFunction (4, 3); 


"demo" 元 素 的 innerHTML 将 是 : 
12 
在 仅 希望 退出 函数 时 ,也 可 以 使 用 return 语句 。 返 回 值 是 可 选 的 ,例如 : 


function myFunction (avb) 
{ 

if (a>b) 

{ 

return; 

} 

x=a+b 
} 


如 果 a 大 于 b, 则 上 面 的 代码 将 退出 函数 ,并 不 会 计算 a 和 b 的 总 和 。 
4. 局 部 量 
JavaScript 函数 内 部 声明 的 变量 是 局 部 变量 ,所 以 只 能 在 函数 内 部 访问 它 。 可 以 在 


不 同 的 函数 中 使 用 名 称 相同 的 局 部 变量 ,因为 只 有 声明 过 该 变量 的 函数 才能 识别 出 该 变 


量 。 


只 要 函数 运行 完毕 ,本 地 局 部 变量 就 会 被 删除 。 

5. 全 局 量 

在 函数 外 声明 的 变量 是 全 局 变量 ,网 页 上 的 所 有 脚本 和 函数 都 能 访问 它 。 

6. 变量 的 生存 期 

变量 的 生命 期 从 它们 被 声明 的 时 间 开 始 。 局 部 变量 会 在 函数 运行 以 后 被 删除 。 全 
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局 变量 会 在 页 面 关闭 后 被 删除 。 如 果 把 值 赋 给 尚未 声明 的 变量 ,该 变量 将 被 自动 作为 全 
局 变量 声明 。 例 如 : 


carname= "Hello™"; 


将 声明 一 个 全 局 变量 carname, 即 使 它 在 函数 内 执行 ,carname 也 是 全 局 变量 。 
427 字符 串 


JavaScript 字符 串 用 于 存储 和 处 理 文本 。 字 符 串 可 以 存储 一 系列 字符 ,如 "John 
Doe"。 字 符 串 可 以 是 插入 引号 中 的 任何 字符 。 使 用 单 引 号 或 双 引 号 将 字符 串 括 起 来 ， 
例如 : 


Var carname= "Hello HTMLS5 JS"; 


Var carname= 'Hello HIML5 JS'; 
可 以 使 用 索引 位 置 来 访问 字符 串 中 的 每 个 字符 ,例如 : 
Var character= carname [7]; 


字符 串 的 索引 从 0 开始 ,这 意味 着 第 一 个 字符 索引 值 为 LC0j], 第 二 个 为 [1j, 以 此 
类 推 。 
可 以 在 字符 串 中 使 用 引号 ,只 要 字符 串 中 的 引号 不 与 字符 串 的 引号 相同 即 可 ,例如 : 


var answer= "It's all right"; 
var answer= "He is called 'Johnny'"; 


Var answer= 'He is called "Johnny"'7 


也 可 以 在 字符 串 中 添加 转 义 字符 来 使 用 引号 ,例如 : 


Var x='It\'s all right'; 
var y= "He is called \"Johnny\"™"; 


1. 字符 串 长 度 
可 以 使 用 内 置 属性 length 来 计算 字符 串 的 长 度 , 例 如 : 





Var txt= "ABCDEFGHIJKLMNOPQORSTUVWXYZ"7 
Var sln= txt.length; 


2. 特殊 字符 


在 JavaScript 中 ,如 果 字 符 串 写 在 单 引 号 或 双 引 号 中 ,会 导致 JavaScript 无 法 解析 ， 
例如 : 


"We are the so- called "Vikings" from the north." 


字符 串 "We are the so-called" 被 截断 。 使 用 反 斜 杠 (\) 来 转 义 "Vikings" 字 符 串 中 的 
双 引 号 ,如 下 所 示 : 
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"We are the so- called \"Vikings\" from the north." 


反 斜 杠 是 一 个 转 义 字符 。 转 义 字 符 将 特殊 字符 转换 为 字符 串 字 符 。 转 义 字符 (\) 可 
以 用 于 转 义 撤 号 、 换 行 .引号 等 其 他 特殊 字符 。 表 4. 2 列举 了 在 字符 串 中 可 以 使 用 转 义 





























字符 转 义 的 特殊 字符 。 
表 4.2 特殊 字符 转 回 表 
代码 输 出 代码 输 出 
Y 单 引号 \r 回 车 
党 双 引 号 \t tab( 制 表 符 ) 
并 反 斜 村 \b 退 格 符 
\n 换行 \f 换 页 符 
3. 属性 


字符 串 属 性 及 其 描述 如 表 4. 3 所 示 。 


表 4.3 字符 串 属 性 及 其 描述 














属 人 性 描 述 
constructor 返回 创建 字符 串 属性 的 函数 
length 返回 字符 串 的 长 度 
prototype 允许 向 对 象 添加 属性 和 方法 

4. 方法 


字符 串 方 法 及 其 描述 如 表 4.4 所 示 。 


表 4.4 字符 串 方法 及 其 描述 











| 法 描 述 
charAt() 返回 指定 索引 位 置 的 字符 
charCodeAt() 返回 指定 索引 位 置 字符 的 Unicode 值 
concat() 连接 两 个 或 多 个 字符 串 ,返回 连接 后 的 字符 串 





fromCharCode() 


将 Unicode 转换 为 字符 串 





indexOf() 


返回 字符 串 中 检索 指定 字符 第 一 次 出 现 的 位 置 





lastIndexOf() 


返回 字符 串 中 检索 指定 字符 最 后 一 次 出 现 的 位 置 





localeCompare() 


用 本 地 特定 的 顺序 来 比较 两 个 字符 串 





match() 


找到 一 个 或 多 个 正则 表达 式 的 匹配 





replace() 





替换 与 正则 表达 式 匹 配 的 子 串 
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续 表 
Da 描 述 
search() 检索 与 正则 表达 式 相 匹配 的 值 
slice() 提取 字符 串 的 片段 ,并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
split() 把 字符 串 分 割 为 子 字 符 串 数组 
substr() 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 





substring() 


提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 





























pe 根据 主机 的 语言 环境 把 字符 串 转换 为 小 写 , 只 有 几 种 语言 (如 土耳其 语 ) 
具有 地 方 特有 的 大 小 写 映 射 

了 根据 主机 的 语言 环境 把 字符 串 转换 为 大 写 , 只 有 几 种 语言 (如 土耳其 语 ) 
具有 地 方 特 有 的 大 小 写 映 射 

toLowerCase() 把 字符 串 转换 为 小 写 

toString() 返回 字符 串 对 象 值 

toUpperCase() 把 字符 串 转换 为 大 写 

trim() 移 除 字符 串 首尾 空白 

valueOf() 返回 某 个 字符 串 对 象 的 原始 值 

428 运算 符 


JavaScript 运算 符 有 算数 运算 符 、 赋 值 运算 符 、 关 系 运 算 符 .逻辑 运算 符 、 条 件 。 


1. 算术 运算 符 


表 4.5 给 了 算术 运算 符 的 解释 。 


表 4.5 算术 运算 符 的 解释 
































运算 符 描述 便于 3 y 
让 加 法 x 一 y 十 2 和 5 
一 减法 x 一 y 一 2 了 5 
x 乘法 x 一 y 关 2 10 5 
# 除法 = 2.5 5 
% 取 模 (余数 ) x=y%2 1 和 

x 一 十 十 y 6 6 

十 十 自 增 

x 一 y 十 十 5 6 

基本 一 一 a 4 
= 自 减 

4 5 和 
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2. 赋值 运算 符 


赋值 运算 符 用 于 给 JavaScript 变量 赋值 。 给 定 x==10 和 y 王 5, 表 4.6 给 出 了 赋值 运 


表 4.6 赋值 运算 符 的 解释 




















运算 符 全 大 雹 等 同 于 运算 结果 
一 x=y x=5 
才 生 x =y x 十 y x=15 
一 兰 一 三 =X 一 yy X 一 5 
= Re 二 二 大 x 一 50 
这 x=x/y = 
%= x%=y x 一 x%y x 一 0 











3. 用 于 字符 串 的 十 运算 符 
十 运算 符 用 于 把 文本 值 或 字符 串 变 量 加 起 来 (连接 起 来 )。 如 需 把 两 个 或 多 个 字符 
串 变 量 连 接 起 来 ,就 使 用 十 运算 符 。 例 如 


txtl= "What a very"; 
txt2= "nice day"; 
txt3=txtl+ txt2; 


txt3 的 运算 结果 如 下 : 
What a verynice day 
如 在 两 个 字符 串 之 间 增 加 空格 ,需要 把 空格 插入 一 个 字符 串 之 中 ,如 下 所 示 : 


txtl="What a very "7 
txt2= "nice day™; 
txt3=txtl+ txt2; 


在 以 上 语句 执行 后 ,变量 txt3 包含 的 值 如 下 : 
What a Very nice day 
或 者 把 空格 插入 表达 式 中 : 


txtl= "What a very"; 
txt2= "nice day"™; 
txt3=txtl+ " "+ txt2; 


以 上 语句 执行 后 ,变量 txt3 包含 的 值 如 下 : 


What a Very ni 


4. 对 字符 串 


Ce day 


和 数字 进行 加 法 运算 
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两 个 数字 相 加 ,返回 数字 相 加 的 和 ,如 果 数 字 与 字符 串 相 加 ,返回 字符 串 。 例 如 : 


X=5+5; 
y= "5"+5; 
二 "elo 5 


xy 和 z 输出 的 结果 如 下 : 


10 
55 
Hello5 


5. 比较 运算 符 和 逻辑 运算 符 


比较 运算 和 逻辑 运算 用 于 测试 true 或 者 false。 比 较 运 算 符 在 逻辑 语句 中 使 用 ,以 
设 x=5, 表 4-7 给 出 了 比较 运算 符 的 解释 。 





测定 变量 或 值 是 否 相等 。 


表 4.7 比较 运算 符 的 解释 






































运算 符 描 述 比 较 返回 值 
x 一 一 false 
等 于 
着 二 true 
一 X 一 一 一 "5 false 
三 绝对 等 于 ( 值 和 类 型 均 相等) 
和 六 true 
!= 不 等 于 x!=8 true 
1 = true 
_ 不 绝对 等 于 ( 值 或 类 型 均 不 相等 ) 
2 二 false 
> 大 于 x>8 false 
~ 水 于 x<8 true 
A 大 于 或 等 于 类 > 一 各 false 
翅 寺 小 于 或 等 于 三 true 











可 以 在 条 件 语 句 中 使 用 比较 运算 符 , 对 值 进行 比较 ,然后 根据 结果 采取 行动 : 


if (age< 18) x="Too young"7 


逻辑 运算 符 用 于 测定 变量 或 值 之 间 的 逻辑 。 给 定 x 一 6 以 及 y 二 3, 表 4.8 给 出 了 逻 


辑 运算 符 的 解释 。 
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表 4.8 逻辑 运算 符 的 解释 

















运算 符 描 述 例证 于 
& and (x<10 && y 二 1) 为 true 
|| or (x 一 一 5| jy 一 一 5) 为 false 
! not 1(Cx 一 一 y) 为 true 
6. 条 件 运 算 符 


JavaScript 还 包含 了 基于 某 些 条 件 对 变量 进行 赋值 的 条 件 运算 符 。 语 法 如 下 : 
variablename= (condition) ?valuel:value2 


例如 : 如 果 变 量 age 中 的 值 小 于 18, 则 向 变量 voteable 赋值 "年 龄 太 小 " ,否则 赋值 


"年 龄 已 达到 "。 


voteable= (age< 18)?" 年 龄 太 小 ":" 年 龄 已 达到 "; 


429 条 件 语 句 


条 件 语 句 用 于 基于 不 同 条 件 来 执行 不 同 的 动作 。 可 以 在 代码 中 使 用 如 下 条 件 语句 


完成 该 任务 : 


加 让 语句 : 只 有 当 指 定 条 件 为 true 时 ,使 用 该 语句 执行 代码 。 

@ 让...else 语句 : 当 条 件 为 true 时 执行 代码 , 当 条 件 为 false 时 执行 其 他 代码 。 
@ if...else 让.…else 语句 : 使 用 该 语句 ,选择 多 个 代码 块 之 一 来 执行 。 

@ switch 语句 : 使 用 该 语句 选择 多 个 代码 块 之 一 来 执行 。 


1. 证 语句 
只 有 当 指定 条 件 为 true 时 ,该 语句 才 会 执行 代码 。 语 法 如 下 


if (condition) 
{ 

当 条 件 为 true 时 执行 的 代码 
' 


如 果 时 间 小 于 20:00, 生 成 问候 "Good Day" ,如 下 所 示 。 


if (time< 20) 
{ 
X= "Good Day"; 


} 


这 个 诗 语句 的 语法 中 没有 .…else.…' 即 只 有 在 指定 条 件 为 true 时 才 执行 代码 。 
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2. if...else 语句 


条 件 为 true 时 执行 代码 ,条 件 为 false 时 执行 其 他 代码 。 语 法 如 下 : 


if (condition) 
{ 
当 条 件 为 true 时 执行 的 代码 


当 条 件 不 为 true 时 执行 的 代码 
} 


如 果 时 间 小 于 20:00, 生 成 问候 "Good Day", 否 则 生成 问候 "Good Evening" ,如 下 
所 示 。 


if (time< 20) 
{ 
x="Good Day"; 
} 
slse 
{ 
X= "Good Evening"; 
} 


3，if...else if...else 语句 


选择 多 个 代码 块 之 一 来 执行 。 语 法 如 下 : 


if (condition1) 

| 当 条 件 1 为 true 时 执行 的 代码 
ee if (condition2) 

当 条 件 2 为 true 时 执行 的 代码 


当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
} 


如 果 时 间 小 于 10:00, 则 生成 问候 "Good Morning" ,如果 时 间 大 于 10:00 小 于 
20:00, 则 生成 问候 "Good Day" ,否则 生成 问候 "Good Evening" ,如 下 所 示 。 


if (time<10) 
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document .write ("<b> Good Morning< /b> "); 
} 
else if (time>=10 && time< 20) 
{ 
document .write ("<b> Good Day< /b> "); 
} 
else 
{ 
document .write ("<b> Good Evening!< /b> "); 
' 


4. switch 语句 


用 于 基于 不 同 条 件 执 行 不 同 的 动作 。 使 用 switch 语句 可 以 选择 要 执行 的 多 个 代码 
块 之 一 。 
(1) 语法 


Switch (n) 
{ 
Case 1: 
执行 代码 块 1 
break; 
Case 2: 
执行 代码 块 2 
break; 
default: 
与 case 1 和 case 2 不 同时 执行 的 代码 
} 


工作 原理 : 首先 设置 表达 式 n( 通 常 是 一 个 变量 )。 随 后 表达 式 的 值 会 与 结构 中 的 每 
个 case 的 值 作 比较 。 如 果 有 匹配 项 , 则 与 该 case 关联 的 代码 块 会 被 执行 。 使 用 break 可 
以 阻止 代码 自动 地 向 下 一 个 case 运行 。 

显示 今天 的 星期 名 称 ( 设 Sunday 二 0、Monday 二 1、Tuesday 二 2, 以 此 类 推 ), 如 下 
所 示 。 


Var G=new Date () .getDay (); 

Switch (d) 

{ 
case 0:x=" 今 天 是 星期 日 "; break; 
case 1:x=" 今 天 是 星期 一 "; break; 
case 2:x=" 今 天 是 星期 二 "; break; 
case 3:x=" 今 天 是 星期 三 "; break; 
case 4:x=" 今 天 是 星期 四 "; break; 
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case 5:x=" 今 天 是 星期 五 "; break; 
case 6:x=" 今 天 是 星期 六 "; break; 
} 
(2) default 关键 词 
使 用 default 关键 词 来 规定 匹配 不 存在 时 所 执行 的 程序 。 
如 果 今 天 不 是 星期 六 或 星期 日 , 则 会 输出 默认 的 消息 ,如 下 所 示 。 





var d=new Date () .getDay () 7 

Switch (d) 

{ 
case 6:x=" 今 天 是 星期 六 "; break; 
case 0:x=" 今 天 是 星期 日 "; break; 
default: z= "期待 周末 "; 

} 

document .getElementById ("demo") .innerHTMI—= x; 


4210 ”循环 语句 


件 。 


JavaScript 支持 4 种 不 同类 型 的 循环 。 

Q@ for: 循环 代码 块 执行 一 定 的 次 数 。 

@ for/in: 循环 遍历 对 象 数组 。 

@ while: 指定 的 条 件 为 true 时 循环 指定 的 代码 块 。 

@ do/while: 同样 , 当 指定 的 条 件 为 true 时 循环 指定 的 代码 块 。 


1. for 循环 
for 循环 是 经 常用 到 的 循环 工具 ,语法 如 下 : 


for (语句 1; 语句 2; 语 句 3) 
{ 

被 执行 的 代码 块 
} 


语句 1 在 被 执行 的 代码 块 前 执行 。 语 句 2 定义 运行 反复 执行 代码 块 需要 满足 的 条 


语句 3 在 每 执行 一 次 代码 块 之 后 执行 。 实 例如 下 。 
for (var i=0; i<5; i++){ =x+ "该 数字 为 "+i+"<br>"; } 


在 上 面 的 例子 中 ,语句 1, 即 var i 二 0, 在 循环 开始 之 前 设置 变量 ;语句 2, 即 i<5， 


义 循环 运行 的 条 件 ; 语 句 3, 即 i 十 十 ,在 每 次 代码 块 已 被 执行 后 增加 一 个 值 。 通 常 使 用 
句 1 初始 化 循环 中 所 用 的 变量 。 语 句 1 是 可 选 的 ,也 就 是 说 ,不 使 用 语句 1 也 可 以 。 在 语 
句 1 中 可 以 初始 化 任意 (或 者 多 个 ) 值 ,如 下 面 的 实例 所 示 。 





定 
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for (var i=0,1len=cars.length; i<len; i++) { document .write (cars[i]+"<br>"); } 
语句 1 也 可 省 略 (比如 在 循环 开始 前 已 经 设置 了 值 时 ) ,例如 : 


var i=2, len= cars.length; 

for (; i<len; i++) { document .write (cars[i]+"<br>"); } 

语句 2 通常 用 于 评估 初始 变量 的 条 件 , 同 样 是 可 选 的 。 如 果 语 句 2 返回 true, 则 循 
环 再 次 开始 ,如 果 返 回 false, 则 循环 将 结束 。 

如 果 省 略 了 语句 2, 必 须 在 循环 内 提供 break。 和 否则 循环 就 无 法 停 下 来 。 这 样 有 可 能 
出 现 死 循环 ,使 浏览 器 崩溃 。 语 句 3 一 般 会 增加 初始 变量 的 值 ,也 是 可 选 的 。 语 句 3 有 
多 种 用 法 。 增 量 可 以 是 负数 (i 一 一 ) ,或 者 更 大 (i=i 十 15)。 语 句 3 也 可 以 省 略 ( 如 当 循 环 
内 部 有 相应 的 代码 时 ) ,语句 如 下 : 


var i=0, len= cars.length; 
for (; i<len; ){ document .write(cars[i]+"<br>"); i++; } 


2. for/in 循环 
for/in 语句 循环 遍历 对 象 数组 ,例如 : 


Var person= [{fname:"John", lname:"Doe", age:25}, {fname:"Tom", lname: "ok", age: 22}]; 
var txt=0; 
for (var x in person) { 
txt=txt+ person[x] .age; 
} 


3. while 循环 
只 要 指定 条 件 为 true, 循 环 就 可 以 一 直 执 行 代 码 块 。 语 法 如 下 : 


while (条 件 ) 
{ 
需要 执行 的 代码 


例如 : 


var i=0; 

while (i<5) 

{ 
X=x+ "The number is "+i+"<br>"; 
PE 


如 果 忘 记 增加 条 件 中 所 用 变量 的 值 ,该 循环 永远 不 会 结束 ,这 可 能 导致 浏览 器 崩溃 。 
4. do/while 循环 
do/while 循环 是 while 循环 的 变 体 。 该 循环 会 在 检查 条 件 是 否 为 真 前 执行 一 次 代码 
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块 ,如 果 条 件 为 真 的 话 , 就 会 重复 这 个 循环 。 语 法 如 下 : 


do 
{ 
需要 执行 的 代码 
} 
while (条 件 ); 


下 面 的 例子 使 用 do/ while 循环 。 该 循环 至 少 会 执行 1 次 ,即使 条 件 为 false, 也 会 执 
行 1 次 ,因为 代码 块 会 在 条 件 被 测试 前 执行 。 


var i=0; 

do 

{ 
X=x+ "The number is "+i+"<br>"; 
i++? 

} 

while (i<5); 


注意 : 漏 掉 增 加 控制 条 件 变量 的 值 ,程序 会 陷入 死 循环 。 


5. break 和 continue 语句 


break 语句 用 于 跳出 循环 。continue 用 于 跳 过 循环 中 的 一 个 迭代 。 





出 循环 后 会 继续 执行 该 循环 之 后 的 代码 ,例如 : 


代 。 


for (i=0;i<10;i++) 
{ 

if (i==3) 

{ 

break; 

} 

X=X+ "The number is "+i+"<br>"; 
下 


由 于 这 个 让 语句 只 有 1 行 代码 ,因此 花 括 号 可 以 省 略 。 


continue 语句 跳 


continue 语句 中 断 循环 中 的 迭代 ,如 果 出 现 了 指定 条 件 ,会 继续 循环 中 的 下 一 个 选 


例如 : 


for (i=0;i<=10;i++) 
{ 
if (i==3) continue; 


X=x+ "The number is "+i+"<br>"; 
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43 错 下 再 下 


431 trycatch-throw 


try 语句 测试 代码 块 的 错误 。catch 语句 处 理 错误 。throw 语句 创建 自 定义 错误 。 当 
JavaScript 引擎 执行 JavaScript 代码 时 ,会 发 生 各 种 错误 ,可 能 是 语法 错误 ,来自 服务 器 
或 用 户 错 误 输 出 而 导致 的 错误 、 其 他 不 可 预知 的 错误 。 当 发 生 错 误 产 生 问 题 时 ， 
JavaScript 引擎 通常 会 停止 ,并 生成 一 个 错误 消息 。 


1. try 和 catch 


try 语句 允许 在 程序 中 定义 错误 测试 的 代码 块 。catch 语句 定义 try 代码 块 发 生 错 误 
时 所 执行 的 代码 块 。try 和 catch 是 成 对 出 现 的 ,如 下 所 示 。 


try { 
// 在 这 里 运行 代码 
} 
catch (err) { 
// 在 这 里 处 理 错 误 
} 


在 下 面 的 例子 中 ,try 块 的 代码 中 写 了 一 个 错字 ,catch 块 会 捕捉 到 try 块 中 的 错误 ， 
并 执行 错误 处 理 程序 来 处 理 它 。 


Var txt=""; 
function message () 
{ 
try { adddqlert ("Welcome guest!"); } 
catch (err) { 
txt= "本 页 有 一 个 错误 。\nvn"7 
txt+= "错误 描述 : "+err.message+ "\n\n"; 
txt+=" 单 击 确定 继续 。\n\n"; 
alert (txt); 


} 
2. throw 语句 


throw 语句 创建 自 定 义 错误 。 如 果 把 throw 与 try 和 catch 一 起 使 用 , 则 能 够 控制 程 
序 流 ,并 生成 自 定义 的 错误 消息 。 语 法 如 下 : 


throw exception 


异常 可 以 是 JavaScript 字符 串 .数字 逻辑 值 或 对 象 。 
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下 面 的 例子 检测 输入 变量 的 值 。 如 果 值 是 错误 的 ,会 抛 出 一 个 异常 (错误 )。catch 
会 捕捉 到 这 个 错误 ,并 显示 一 段 自 定义 的 错误 消息 。 
function myFunction() 
{ 
try 
{ 
Var x=document .getElementById ("demo") .value; 
ifte=="™) throw " 值 为 空 "; 
if (isNaN (x) ) throw "不 是 数字 "7 
if(x>10) throw " 太 大 "; 
if (x<5) throw " 太 小 "; 
} 
catch (err) 
Var y=document .getElementById ("mess"); 
Y.innerHTML= "错误 : "+err+ "。"; 


} 
如 果 getElementById 函数 出 错 , 上 面 的 例子 也 会 抛 出 一 个 错误 。 


432 调试 


程序 可 能 包含 语法 错误 .逻辑 错误 。 如 果 没 有 调试 工具 ,就 难以 发 现 这 些 错误 。 通 
常 , 如 果 JavaScript 出 现 错误 ,又 没有 提示 信息 ,就 无 法 找到 程序 的 错误 位 置 。 而 在 编写 
程序 时 ,难免 不 发 生 错误 。 在 程序 代码 中 寻找 错误 叫做 代码 调试 ,很 多 浏览 器 都 内 置 了 
调试 工具 。 内 置 的 调试 工具 可 以 开始 或 关闭 ,严重 的 错误 信息 会 发 送 给 用 户 。 

有 了 调试 工具 ,就 可 以 设置 断 点 (代码 停止 执行 的 位 置 ), 且 可 以 在 代码 执行 时 检测 
变量 。 浏 览 器 启用 调试 工具 一 般 是 按 下 F12 键 ,并 在 调试 菜单 中 选择 Console 输出 结果 ， 
或 利用 设置 断 点 开辟 观察 变量 窗口 ,或 利用 try-catch 捕获 异常 。 


1. console. log() 方法 


如 果 浏 览 器 支持 调试 ,可 以 使 用 console. log() 方 法 在 调试 窗口 上 打印 JavaScript 
值 ,如 下 所 示 。 

a=5; 

b=6; 

C=atb; 


console.1log (c); 


2. 设置 断 点 
在 调试 窗口 中 可 以 设置 JavaScript 代码 的 断 点 。 在 每 个 断 点 上 都 会 停止 执行 
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JavaScript 代码 ,以 检查 JavaScript 变量 的 值 。 检 查 完毕 可 以 重新 执行 代码 。 
3. 主要 浏览 器 的 调试 工具 


通常 ,在 浏览 器 中 启用 调试 工具 是 按 下 F12 键 ,并 在 调试 菜单 中 选择 Console。 不 同 
浏览 器 的 调试 工具 基本 相同 ,但 启动 方式 不 尽 相同 ,具体 如 下 。 

(1) Chrome 浏览 器 

单 击 最 右 侧 的 “ 自 定义 与 控制 Google Chrome” 图 标 , 在 菜单 中 选择 工具 ,在 工具 中 选 
择 开发 者 工具 ,最 后 选择 Console。 

(2) Firefox 浏览 器 

打开 浏览 器 ,访问 页 面 http://www. getfirebug. com, 按 照 说 明 安装 Firebug, 而 后 按 
F12 键 进入 开发 者 工具 ,最 后 选择 Console。 

(3) Internet Explorer 浏览 器 

打开 浏览 器 ,在 菜单 中 选择 开发 者 工具 ,或 按 F12 键 进入 开发 者 工具 ,最 后 选择 
Console。 

(4) Opera 浏览 器 

打开 浏览 器 ,在 菜单 中 选择 开发 者 ,在 开发 者 中 选择 开发 者 工具 ,最 后 选择 Console。 

(5) Safari 浏览 器 

打开 浏览 器 , 右 击 ,选择 检查 元 素 , 在 底部 弹出 的 窗口 中 选择 “控制 台 ”。 


44 上 机 实验 样 例 


1. 实验 目标 
掌握 浏览 器 脚本 程序 控制 台 输 出 和 设置 断 点 进行 跟踪 调试 技术 。 
2. 实验 任务 


建立 一 个 HTML 文档 ,利用 JavaScript 计算 1 一 100 的 整数 累加 和 ,利用 控制 台 输 出 
结果 。 


3. 实验 步骤 
(1) 源 程序 : 4-3-1. htm 


<html Xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
<Script type= "text/javascript"> 
function ComputeSum() { 
Var i; 


Var Sumz 
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for (i=0; i<100; i++) sumt=i; 
console.1log (sum); 
return sum; 
} 
</script> 
</head> 
<body> 
< script type= "text/javascript"> 
ComputeSum(); 
</script> 
< /body> 
</html> 


(2) 在 浏览 器 中 浏览 
在 浏览 器 中 浏览 的 结果 如 图 4.2 所 示 。 


httpV/localhost34734/ 源 程序 X 





避 炎 地 官方 站 点 图 最 党 访问 器 火狐 官方 站 点 二 新 手 上 路 > 站 移动 版 书签 








4.2 源 程序 4-3-1 的 浏览 器 浏览 


(3) 在 浏览 器 中 的 控制 台中 浏览 


在 图 4. 2 所 示 的 浏览 器 中 按 F12 键 , 浏 览 器 底部 弹出 开发 人 员工 具 界 面 , 选 中 控制 


台 选 项 卡 ,如 图 4. 3 所 示 。 
图 4.3 所 示 的 控制 台中 的 输出 为 NaN ,需要 单 拍 跟踪 调试 。 步 骤 如 下 
Q@ 选中 调试 器 : 在 开发 人 员工 具 中 选择 调试 器 。 
@ 选中 4-3-1. htm: 在 左 侧 的 资源 菜单 中 选中 4-3-1. htm。 
@ 设置 断 点 : 在 右 侧 的 源 程序 中 单 击 第 10 行 的 数字 。 
经 过 以 上 3 步 , 断 点 设置 成 功 , 如 图 4.4 所 示 。 
(4) 设置 监视 sum 变量 
设置 监视 步骤 如 下 。 
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http://localhost34734/ 源 程序 ，X 
所 | iocalhost34734/ 太 BF 图 跟 C ||Q BE<Cwzk> | 男 
四 waW 记 方 站 点 贺 最 党 沪 问 加 火 牟 官 方 站 点 仿 新 手 上 路 » 品 移 动 版 书签 








更 二 入- | 到 术 t.。 以 二 Jo-| 器- 渤 虽 亲 回 日 晶 
会 [四 网 络 W -| © css "|| © -| @ 去 全 (| 9 日 志 U) ”|e 服务 器 G) ”| 过 渍 出 














HTTP/1. 1 200 OK 14ms] 
4-3-1. htm:12:17 


b GET http://localhost:34734/ BF AS 
SaN 








图 4.3 源 程序 4-3-1 的 浏览 器 浏览 的 控制 台 输出 


http://localhost34734/ 源 程序 X 
专 ) localhost34734/ 源 程序 / 实 ¥ 轿 跟 C ||Q BE<Crl+k> 他 | 自 时 会 > 
加 火 交 官方 站 点 园 最 党 访问 加 火狐 官方 站 点 苞 新 手 上 路 加 第 用 网 址 四 京东 商城 » 中移动 版 书签 


年 查看 器 控制 台 调试 器 样式 编辑 器 性 能 “内存 网络 DOM "| 国 "三 急 闪 回回 日 
| QQ 挫 索 时 本 (Ctr+P) | 品 从 


iB3. 上 
1| </pOCTIPE htal PUBLIC “-//W3C//DID TET 1.0 Tran: A 事件 


3| html xmlne="http://w. w3. ore/1999/xhtml”> 添加 监视 表达 式 








<titleyC/title> 
《script type="text/javascript”> 
function CogputeSum() { 


ar sum; 

For (i = 0; i 100: i++) 
Sun += i; 

console. log (sum) ; 

Teturn sum; 








4.4 ”成功 设置 断 点 后 的 界面 


中 弹出 快捷 菜单 。 
在 图 4.4 的 右 侧 源 程序 区 域 右 击 ,弹出 如 图 4. 5 所 示 的 快捷 菜单 。 


@ 输入 监视 变量 sum。 
单 击 图 4.5 所 示 的 “选择 要 监视 的 表达 式 ”, 在 添加 表达 式 文本 框 中 输入 sum 后 按 回 


车 键 确认 ,显示 如 图 4.6 所 示 的 界面 。 
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httpy//localhost34734/ 源 程序 X 
所 | localhost34734/ 源 EE 序 / 详 ¥# 国 刀 C ||QBS<czk> | 窒 | 自 昧 会» 
辐 * 多 官方 站 点 园 最 党 访问 加 火狐 官方 站 点 获 新 手 上 路 加 御用 网 址 四 京东 商城 > 中 移动 版 书签 











和 查看 器 控制 台 | 调试 器 样式 编 名 可 ”性 能 “内存 网 络 DOM "| 辕 
人 总 有 | 号 控 索 肢 本 (Ctd+P) 








1DocTTPE htal PUBLIC “-//W3C//DID XHTML. 1.0 Trani A 


调用 栈 | 


html xalns="http://w wa. org/1999/xhtel”> 


titley</titley 
type= text/ javascript”> 





console. oe (sa 人 


Ctrl+Shift+E 

















过 沪 蝴 本 (P) Cl+pP 
搜索 所 有 文件 E) Ctrl+Alt+F 
搜索 函数 定义 D) ”Ctrl+D 


查找 (FE) Cul+F 

跳 至 某 行 山 … Ctrl+L 

过 湾 变 量 (V) Ctrl+Alt+V 
聚焦 变量 树 V) Ctd+Shift+V 
美化 源 代 码 








4.5 调试 器 源 程 序 区 弹出 的 快捷 菜单 


httpy/localhost34734/ 源 程序 X 
所 | | localhost34734/ 涯 BF 加 器 C ||Q EE<cmrk | 窜 | 自 县 会 了 
辐 X3 官 方 站 点 圆 最 党 访问 占 火狐 官方 站 点 作 新 手 上 路 加 常 用 网 址 四 京东 商城 


局 ” 坦 看 湛 “ 控 制 台 | 届 器 样式 编 请 器 性 能 “内存 ”网 结 _DOM [| 





i | 口 控 索 脚本 (Ctri+ 





{DOCTIPE htal PUBLIC “-//W3C//DID XHTM 1.0 Tran: A 





html xalns="http://w. w3. org/1999/xhtul”> 
head> 
title></title> 
script type= text/ javascript > 
function ComputeSun0 { 
var i; 
ar sun; 
For (i = 0: i < 100: i++) 
sun = 1; 
console. log (sum) ; 
Teturn sum: 





4.6 添加 监视 sum 变量 
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@ 在 断 点 处 观察 sum。 
单 击 图 4.7 中 所 示 的 红色 矩形 圈 中 的 按钮 (“ 重 新 载 人 当前 页 面 ? 按 钮 ), 则 程序 运行 


到 断 点 处 停止 ,如 图 4. 8 所 示 。 观 察 右 侧 监视 表达 式 , 此 时 sum 为 undefined。 这 意味 着 
sum 变量 没有 初 值 。 按 F10 键 1 次 , 单 步 运行 1 次 ,执行 1 条 语句 ,此 时 sum 变 成 NaN， 


如 图 4.9 所 示 。 


http://localhost34734/ 源 程序 X 
所 D localhost34734/ 源 EB 记 详 # ” 回 跟 [|]|IQBE<cmik> | 安 | 自 时 会 » 
加 x 官方 站 点 图 最 党 访问 加 火狐 官方 站 点 区 新 手 上 路 加) 党 用 网 址 图 京东 商城 





» 中 移动 版 书签 


科 吉 看 及 接 负 各 | 滑 吉 林 坊 名 丢人 性 能 内 存 网 络 DOM 


WA. 上 








{DOCTIPE htel PUBLIC “-//WSC//DID XHTML. 1.0 Tran: A 


html xmlng= http://www w3. org/1999/xhtml 
head> 
《titleyK/titley 
《script type= "text/javascript > 
Function ComputeSum0 { 
ar i; 
Yar sun; 
党 20 for (i = 0; 1 < 100; i++) 
un = 1; 


ee Ml console. log (sum) ; 


。 v 
id Teturn sum; 


® 1| @ 








4.7 单 击 重新 加 载 页 面 按钮 


D httpy/localhost34734/ 源 | X 
4] O eahosat7aWEHaS 回 眼 x | |Q Eco | 容 | 自 及 会 > 
加 炎 狂言 方 站 点 园 最 常 访问 器 火狐 言 方 站 点 功 新 手 上 路 器 第 用 网 址 四 京东 商城 » 中 移动 版 书签 


“和 查看 器 控制 台 届 二 器 样式 编辑 器 ”性 能 “内存 网 络 DOM 引 国 -二 
[ 戎 | G3， .51 《jcomputesum 天 程序 /实验 -1.htm:10 》|| ” 控 过 时 二 (Cap) 


{DOCTIPE html PUBLIC “-//W3C//DID HT 1.0 Tran: A 























html xmlns="http://ww. w3. ore/1999/xhtal”> 
head> 
《titley</titley 
《Script type= text/ javascript > 
Function CogputeSum() { 
yar i; 
wer can: » this: Window —...3-1.htm 
For (i =0: i < 100: i++) } arguments: Arguments 
rd undefined 

console loefsaa) ; 
return sum: sum: undefined 


:| < mi 》Blok 域 
图 4.8 运行 到 断 点 处 的 sum 值 











门 httpy/localhost34734/ 源 | X 








所 | 四 iocalhost34734/ 源 杞 订 /ss 。 国 跟 Xx ||Q -cm | 家 | 由 上 会 > 三 





加 XgK 言 方 站 点 图 最 常 访问 加 火狐 官方 站 点 全 新 手 上 路 加 第 用 网 址 四 京东 商城 » 中 移动 版 书签 




















ComputeSum 源 程序 /实验 ..…1.htm:10 》 | 二 过 过 本 (Ctri+ 

















(5) 修正 源 程序 


2 
4| chead> 
| titleyd/titley 


mr i; 








1| ctpocTIPs htal PUBLIC “-//W3C//DID HT 1.0 Tran: A 


3| 人 tal xelns="http://w. wa. ore/1999/xhtnl”> 


5 
6| script type= text/ javascript"y 
7| Fonction ComputeSun() { 
8 
引 wa sun; 
for (i= 
Sm = i; 
console. log (sum) ; 


0: 1 100: 1++) 





图 4.9 单 步 运 行 1 旬 的 sum 值 


将 var sum; 改 成 var sum 一 0。 


(6) 取消 断 点 


在 调试 器 右 侧 的 源 程序 中 单 击 语句 10 的 标号 10, 取 消 断 点 。 


(7) 重新 加 载 页 面 


单 击 图 4.7 中 红色 矩形 圈 中 的 按钮 ,重新 加 载 页 面 , 如 图 4. 10 所 示 , 此 时 控制 台 输 


出 4950 。 


过 | @ localhost34734/ 源 EE 序 / 详 ¥ 国 器 C ||QEBRE<Cmzk> | 食 | 自 及 会 ?> 





回 * 闻 官方 站 点 圆 最 党 访问 器 火狐 官方 站 点 功 新 手 上 路 加 第 用 网 址 图 京东 商城 » 中 移动 版 书签 





i |W a DOM -二 中 必 加 





从 Recss- 





los” le2Y- eBtU” 





昌 服务 (5) - | ?二 | 








上 GET http://localhost:-34734/NEGNEAN9ONETKASN8DXESKBANSF/NESNAEN9ESE9KAANSC/4-3-1_hta [HTIP/1. 1 200 OK ssms] 





4950 





4-3-1. htm:12:17 


4.10 为 sum 赋 初 值 取消 断 点 重新 加 载 页 面 后 控制 台 的 输出 
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45 实验 任务 


1. 实验 题目 

实现 杨辉 三 角形 HTML 浏览 器 开发 工具 控制 台 输 出 程序 。 
2. 实验 目的 

JavaScript 程序 错误 跟踪 调试 与 异常 捕获 技能 训练 。 

3. 实验 类 型 

验证 与 技能 训练 。 

4. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 至 少 一 处 错误 的 描述 。 

(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 监视 变量 值 。 
(5) 给 出 错误 修正 后 控制 台 运 行 结 果 。 
(6) 给 出 至 少 一 个 异常 语句 的 捕获 。 
(7) 以 上 全 部 操作 用 屏幕 截图 支撑 。 


5. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB、 主 频 1.8GHz 及 以 上 硬盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010 或 Adobe Dreamweaver。 

(4) 浏览 器 : IE9 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 


6. 实验 原理 


(1) 杨辉 三 角形 的 二 维 坐标 。 
(2) 二 维 坐标 与 控制 台 的 映射 。 
(3) 二 重 循环 对 应 二 维 坐 标 。 
7. 源 程 序 


(1) 辅 以 必要 的 注释 。 
(2) 错落 有 致 ,结构 清晰 , 易 读 性 强 。 





HIML DOM 


图 知识 目标 

。 理解 DOM 的 概念 

。 掌握 DOM CSS 的 应 用 

。 掌握 DOM 事件 的 响应 与 处 理 

掌握 DOM 添加 删除 元 素 功能 的 实现 

。 掌握 BOM 的 Windows 对 象 方法 

。 掌握 BOM 的 计时 事件 

。 掌握 BOM 的 Cookie 概念 和 应 用 

图 能 力 目标 

。 根据 实际 需求 恰当 选择 事件 并 进行 相应 处 理 

。 根据 具体 要 求 动态 改变 HTML 元 素 样式 

。 根据 功能 需要 设计 与 实现 动态 HTML 交互 页 面 
。 根据 实际 需求 恰当 应 用 计时 事件 和 Cookie 技术 
图 素质 目标 

。 根据 实际 需要 设计 与 实现 动态 交互 HTML 页 面 
。 根据 实际 应 用 需求 编写 恰当 的 键盘 与 鼠标 事件 处 理 程序 
图 教学 重点 

。 DOM 事件 响应 与 处 理 

。 DOM 改变 元 素 样 式 

。 BOM 计时 事件 应 用 

图 教学 难点 

。 对 象 的 可 见 性 .生存 期 与 重合 

图 建议 学 时 

。 理论 : 2 学 时 

。 实验 : 2 学 时 
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51 概 水 


文档 对 象 模型 , 即 DOM(Document Object Model) ,独立 于 平台 和 语言 ,以 统一 方式 
访问 和 修改 一 个 文档 的 内 容 和 结构 。DOM 以 对 象 管理 组 织 COMG ) 的 规约 为 基础 ,可 用 
于 任何 编程 语言 。DOM 技术 使 得 用 户 页 面 可 以 动态 地 变化 , 它 可 以 显示 或 隐藏 一 个 元 
素 ,改变 元 素 的 属性 ,增加 一 个 元 素 等 ,这 使 得 页 面 的 交互 性 大 大 增强 。 

DOM 是 以 面向 对 象 方式 描述 的 文档 模型 ,定义 了 表示 和 修改 文档 所 需 的 对 象 . 这 些 
对 象 的 行为 和 属性 以 及 这 些 对 象 之 间 的 关系 。DOM 把 页 面 元 素 组 织 成 一 个 树 形 结构 
(可 能 并 不 是 以 这 种 树 的 方式 具体 实现 ) 。 

通过 JavaScript 可 以 重 构 整 个 HTML 文档 ,可 以 添加 、 移 除 、 改 变 或 重 排 页 面 上 的 
元 素 。JavaScript 可 以 获得 对 HTML 文档 中 所 有 元 素 访 问 的 入 口 。 根 据 这 个 入 口 ,应 用 
对 HTML 元 素 进行 添加 、 移 动 .改变 或 移 除 的 方法 和 属性 ,可 以 组 织 动态 HTML 页 面 ， 
实现 用 户 与 页 面 的 动态 交互 。 

1998 年 ,W3C 发 布 了 第 一 级 DOM 规范 。 这 个 规范 允许 访问 和 操作 HTML 页 面 中 
每 一 个 单独 的 元 素 。 所 有 浏览 器 都 已 执行 该 标准 ,从 而 解决 DOM 的 兼容 性 问题 。DOM 
可 被 JavaScript 用 来 读 取 改变 HTML XHTML 及 XML 文档。 


1. 基本 构成 


DOM 遵循 W3C( 万 维 网 联盟 ) 的 标准 ,定义 了 访问 HTML 和 XML 文档 的 标准 。 
W3C 文档 对 象 模型 是 中 立 于 平台 和 语言 的 接口 ,允许 程序 和 脚本 动态 地 访问 和 更 新 文档 
的 内 容 .结构 和 样式 ,分 为 核心 .XML 及 HTML 三 大 部 分 。 

(1) 核心 DOM 

核心 是 针对 任何 结构 化 文档 的 标准 模型 。 

(2) XML DOM 

XML DOM 是 针对 XML 文档 的 标准 模型 ,提供 访问 和 操纵 XML 的 标准 编程 接口 ， 
中 立 于 平台 和 语言 ,遵从 W3C 标准 。XML DOM 定义 了 所 有 XML 元 素 的 对 象 和 属性 ， 
以 及 访问 它们 的 方法 (接口 ) , 即 XML DOM 是 用 于 获取 更改 .添加 或 删除 XML 元 素 的 
标准 。 

(3) HTML DOM 

HTML DOM 是 针对 HTML 文档 的 标准 模型 ,提供 访问 和 操纵 HTML 的 标准 编程 
接口 ,遵从 W3C 标准 ,定义 了 所 有 HTML 元 素 的 对 象 和 属性 ,以 及 访问 它们 的 方法 。 换 
言 之 ,HTML DOM 是 关于 获取 修改 、 添 加 或 删除 HTML 元 素 的 标准 。 


2. 文档 树 








HTML 文档 中 的 所 有 节点 组 成 了 一 个 文档 树 (或 节点 树 ) 。 节 点 彼此 间 都 有 等 级 关 
系 。HTML 文档 中 的 每 个 元 素 、 属 性 .文本 等 都 代表 着 树 中 的 一 个 节点 。 树 起 始 于 文档 
节点 ,并 由 此 继续 伸 出 枝条 ,直到 处 于 这 棵 树 最 低级 别 的 所 有 文本 节点 为 止 。 文 档 树 示 
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例如 图 5.1 所 示 。 














5.1 文档 树 示例 


图 5. 1 中 的 所 有 节点 彼此 间 都 存在 关系 。 除 根 元 素 节点 之 外 的 每 个 节点 都 有 父 节 
点 ,如 二 head 之 和 <body> 的 父 节点 是 王 html> 节点 ,元 素 a 节点 的 父 节 点 是 王 body 二 

大 部 分 元 素 节点 都 有 子 节点 ,如 二 head 二 节点 有 一 个 子 节点 过 title 二 节点 。 达 title 二 
节点 有 一 个 文本 子 节点 。 

当 节 点 分 享 同一 个 父 节点 时 ,它们 就 是 同辈 ( 同 级 节点 ), 如 二 hl 二 和 二 a 二 是 同 韭 ， 
因为 它们 的 父 节 点 均 是 二 body 二 节点 。 

节点 也 可 以 拥有 后 代 , 后 代 指 某 个 节点 的 所 有 子 节点 ,或 者 这 些 子 节点 的 子 节点 ,以 
此 类 推 。 例 如 ,所 有 文本 节点 都 是 二 html 二 节点 的 后 代 , 而 第 一 个 文本 节点 是 二 head 二 
节点 的 后 代 。 

节点 也 可 以 拥有 先辈 。 先 辈 是 某 个 节点 的 父 节点 ,或 者 父 节点 的 父 节 点 ,以 此 类 推 。 
例如 ,所 有 的 文本 节点 都 可 把 二 html 节点 作为 先辈 节点 。 


3. 访问 结 点 


可 使 用 如 下 方法 来 查找 所 操作 元 素 。 

。 getElementById() 和 getElementsByTagName() 方 法 。 

。 节点 的 parentNode \firstChild 以 及 lastChild 属性 。 

(1) getElementById() 和 getElementsByTagName() 方 法 

这 两 种 方法 可 查找 整个 HTML 文档 中 的 任何 HTML 元 素 。 它 们 会 忽略 文档 的 结 
构 。 如 果 和 希望 查找 文档 中 所 有 的 二 p 二 元 素 ,getElementsByTagName() 会 找到 全 部 ,不 
管 二 p 二 元 素 处 于 文档 中 的 哪个 层次 。 同 时 ,getElementById() 方 法 也 会 返回 正确 的 元 
素 ,不 论 它 被 隐藏 在 文档 结构 中 的 什么 位 置 。 这 两 种 方法 会 找到 任何 HTML 元 素 ,不论 
它们 在 文档 中 所 处 的 位 置 。 
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getElementById() 可 通过 指定 的 ID 返回 元 素 ,语法 如 下 : 
document .getElementById ("ID"); 


getElementById() 无 法 工作 在 XML 中 。 在 XML 文档 中 ,通过 拥有 类 型 id 的 属性 
进行 搜索 ,而 此 类 型 必须 在 XML DTD 中 声明 。 

例如 ,document. getElementByld(maindiv). getElementsByTagName("p") ;会 返回 
所 有 二 p 二 元素 的 一 个 节点 列表 , 且 这 些 二 p 二 元素 必须 是 id 为 "maindiv" 的 元 素 的 后 代 。 

getElementsByTagName() 方 法 会 使 用 指定 的 标签 名 返回 所 有 元 素 ( 作 为 一 个 节点 
列表 ) ,这 些 元 素 是 使 用 此 方法 时 所 处 的 元 素 的 后 代 。 

getElementsByTagName() 可 被 用 于 任何 的 HTML 元 素 , 语 法 如 下 : 





document .getElementsByTagName ("标签 名 称 "); 


例如 ,document. getElementsByTagName("p"); 会 返回 文档 中 所 有 二 p 二 元 素 的 一 
个 节点 列表 。 
使 用 节点 列表 时 ,通常 要 把 此 列表 保存 在 一 个 变量 中 ,例如 : 


var x= document .getElementsBYTagName ("p"); 


变量 x 是 包含 着 页 面 中 所 有 二 p 记 元 素 的 一 个 列表 ,并 且 可 以 通过 它们 的 索引 号 (从 
0 开始) 来 访问 这 些 二 p 二 元 素 。 
可 以 通过 使 用 length 属性 来 循环 遍历 节点 列表 ,例如 : 


Var x= document .getElementsByTagName ("p"); 


for (var i=0;i<x.length;i++) { //do something with each paragraph } 
也 可 以 通过 索引 号 来 访问 某 个 具体 的 元 素 。 比 如 访问 第 三 个 二 p 二 元 素 , 写 成 : 
Var y=x[2]; 


(2) parentNode \firstChild 及 lastChild 属性 
这 3 个 属性 可 遵循 文档 的 结构 ,在 文档 中 访问 结 点 。 
下 面 展示 这 个 HTML 片段 : 


<table> 
<tr> 
<td> John< /td> 
<td> Doe< /td> 
<td>Alaska< /td> 
</tr> 
</table> 


在 上 面 的 HTML 代码 中 ,第 一 个 二 td 是 过 tr 过 元 素 的 首 个 子 元 素 (firstChild) ,最 


后 一 个 之 td 二 是 过 tr 二 元 素 的 最 后 一 个 子 元 素 (lastChild)。 此 外 ,二 tr 二 是 每 个 过 td> 元 
素 的 父 节 点 (parentNode) 。 
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52 DOM 功 能 


通过 可 编程 的 对 象 模型 ,JavaScript 能 创建 动态 的 HTML ,具体 功 能 如 下 : 
OO 改变 页 面 中 的 HTML 元 素 。 

@ 改变 页 面 中 的 HTML 属性 。 

@ 改变 页 面 中 的 CSS 样式 。 

@ 对 页 面 中 的 事件 做 出 反应 。 


521 DOM HTML 
HTML DOM 允许 JavaScript 改变 HTML 元 素 的 内 容 。 
1. 改变 HTML 输出 流 


JavaScript 能 够 创建 动态 的 HTML 内 容 , 在 JavaScript 中 ,document. write() 可 用 于 
直接 向 HTML 输出 流 中 写 内 容 。 

例 5-2-1-1 浏览 器 输出 为 :“ 今 天 的 时 间 是 : Thu Feb 16 2017 09:03:00 GMT 十 
0800”, 源 文档 如 下 : 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.o0rg/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<script> 
document .write (Date ()); 
</script> 
< /body> 
</htm> 


注意 : 文档 加 载 完 成 之 后 使 用 document. write() ,会 履 盖 该 文档 。 


2. 改变 HTML 内 容 





修改 HTML 内 容 最 简单 的 方法 是 使 用 innerHTML 属性 。 改 变 HTML 元 素 内 容 
的 语法 如 下 : 


document .getElementById (id) .innerHTMI= 新 的 HIML 
例 5-2-1-2 改变 二 p 志 元素 的 内 容 , 源 文档 如 下 : 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
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<head> 
<title></title> 
< /head> 
<body> 
<p id= "pl">Hello World!< /p> 
<script> 
document .getElementById ("pl") .innerHTMI "新 文本 !"; 
</script> 
< /body> 
</htm> 


3. 改变 HTML 属性 

改变 HTML 元 素 的 属性 语法 如 下 : 

document .getElementById (id) .attribute= 新 属性 值 
例 5-2-1-3 改变 图 片 。 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 
< img id= "image" src="../Images/0.jpg" alt=""/> 
<script> 
document .getElementById ("image") .src="../Images/1.jpg"; 
</script> 
< /body> 
</html> 


例 5-2-1-3 的 HTML 文档 含有 id 二 "image" 的 二 img 元 素 , 用 HTML DOM 获得 


id 二 "image" 的 元 素 ,然后 更 改 此 元 素 的 属性 。 
522 DOMCSS 


HTML DOM 允许 JavaScript 改变 HTML 元 素 的 样式 。 改 变 HTML 元 素 样式 的 


语法 如 下 : 


document .getElementById (id) .style.property= 新 样式 
例 5-2-2-1 改变 二 p> 元 素 的 样式 , 源 文档 如 下 : 


< IDOCTYPE html> 
<html> 
<head> 
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<title> 以 上 段落 通过 脚本 修改 < /title> 
</head> 
<body> 
<p id= "pl">Hello World!< /p> 
<p id="p2"> Hello World!< /p> 
<script> 
document .getElementById ("p2") .style.color= "blue"; 
document .getElementById ("p2") .style.fontFamily= "Arial"; 
document .getElementById ("p2") .style.fontSsize="30px"; 
</script> 
< /body> 
</htm> 


523 DOM 事 件 


HTML DOM 能 通过 触发 事件 来 执行 代码 。HTML 有 许多 不 同类 型 的 事件 ,包括 
单 击 、 网 页 加 载 . 图 像 加 载 . 鼠 标 指向 元 素 、 输 入 文本 改变 、 提 交 表 单 .触发 按键 等 。 


1. 事件 分 类 


(1) 一 般 事 件 

onClick: 单 击 事件 ,多 用 在 某 个 对 象 控 制 范围 内 单 击 。 

onDblClick: 双击 事件 。 

onMouseDown: 鼠标 上 按钮 被 按 下 。 

onMouseUp: 鼠标 按 下 后 , 松 开 时 激发 的 事件 。 

onMouseOver: 鼠标 移动 到 某 对 象 范围 上 方 时 触发 的 事件 。 
onMouseMove: 鼠标 移动 时 触发 的 事件 。 

onMouseOut: 鼠标 离开 某 对 象 范 围 时 触发 的 事件 。 

onKeyPress: 键盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 的 事件 。 
onKeyDown: 键盘 上 某 个 按键 被 按 下 时 触发 的 事件 。 

onKeyUp: 键盘 上 某 个 按键 被 按 后 放 开 时 触发 的 事件 。 

(2) 页 面相 关 事 件 

onAbort: 图 片 下 载 时 被 用 户 中 断 。 

onBeforeUnload: 当前 页 面 的 内 容 将 要 被 改变 时 触发 的 事件 。 

onError: 捕捉 当前 页 面 出 现 的 错误 ,如 脚本 错误 与 外 部 数据 引用 的 错误 。 
onLoad: 页 面 加 载 完 成 传送 到 浏览 器 时 触发 的 事件 ,包括 外 部 文件 引入 完成 。 
onMove: 浏览 器 的 窗口 被 移动 时 触发 的 事件 。 

onResize: 浏览 器 的 窗口 大 小 被 改变 时 触发 的 事件 。 

onScroll: 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 。 

onStop: 浏览 器 的 停止 按钮 被 按 下 时 触发 的 事件 或 者 正在 下 载 的 文件 被 中 断 。 
onUnload: 当前 页 面 将 被 改变 时 触发 的 事件 。 
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(3) 表单 相关 事件 

onBlur: 当前 元 素 失去 焦点 时 触发 的 事件 ,鼠标 与 键盘 的 触发 均 可 。 

onChange: 当前 元 素 失去 焦点 且 元 素 内 容 发 生 改 变 而 触发 的 事件 , 鼠标 与 键盘 的 
触发 。 

onFocus: 某 个 元 素 获 得 焦点 时 触发 的 事件 。 

onReset: 表单 中 RESET 的 属性 被 激发 时 触发 的 事件 。 

onSubmit: 一 个 表单 被 递交 时 触发 的 事件 。 

(4) 滚动 字幕 事件 

onBounce: 在 Marquee 内 的 内 容 移动 至 Marquee 显示 范围 之 外 时 触发 的 事件 。 

onFinish: Marquee 元 素 完成 需要 显示 的 内 容 后 触发 的 事件 。 

onStart: Marquee 元 素 开 始 显示 内 容 时 触发 的 事件 。 

(5) 编辑 事件 

onBeforeCopy: 当 页 面 被 选 内 容 将 要 复制 到 浏览 者 系统 的 剪贴 板 前 触发 的 事件 。 

onBeforeCut: 当 页 面 一 部 分 或 者 全 部 内 容 将 被 移 离 当前 页 面 剪 贴 并 移动 到 浏览 者 
的 系统 剪贴 板 时 触发 的 事件 。 

onBeforeEditFocus: 当前 元 素 将 要 进入 编辑 状态 。 

onBeforePaste: 内 容 将 要 从 浏览 者 的 系统 剪贴 板 传 送 粘贴 到 页 面 中 时 触发 的 事件 。 

onBeforeUpdate: 当 浏 览 者 粘贴 系统 剪贴 板 中 的 内 容 时 通知 目标 对 象 。 

onContextMenu: 当 浏 览 者 右 击 出 现 菜单 时 ,或 者 通过 键盘 的 按键 触发 页 面 菜单 时 
触发 的 事件 。 

onContentMenu= "return false" 禁 止 使 用 鼠标 右键 。 

onCopy: 当 页 面 被 选 内 容 被 复制 后 触发 的 事件 。 

onCut: 当 页 面 被 选 内 容 被 剪 切 时 触发 的 事件 。 

onDrag: 当 某 个 对 象 被 拖 动 时 触发 的 事件 。 

onDragDrop: 一 个 外 部 对 象 被 鼠标 拖 进 当前 窗口 或 者 帧 。 

onDragEnd: 当 鼠 标 拖 动 结束 时 触发 的 事件 , 即 释 放 鼠 标 按钮 。 

onDragEnter: 当 对 象 被 鼠标 拖 动 的 对 象 进入 其 容器 范围 内 时 触发 的 事件 。 

onDragLeave: 当 对 象 被 鼠标 拖 动 的 对 象 离开 其 容器 范围 内 时 触发 的 事件 。 

onDragOver: 当 某 被 拖 动 的 对 象 在 另 一 对 象 容器 范围 内 拖 动 时 触发 的 事件 。 

onDragStart: 当 某 对 象 将 被 拖 动 时 触发 的 事件 。 

onDrop: 在 一 个 拖 动 过 程 中 释放 鼠标 键 时 触发 的 事件 。 

onLoseCapture: 当 元 素 失去 鼠标 移动 所 形成 的 选择 焦点 时 触发 的 事件 。 

onPaste: 当 内 容 被 粘贴 时 触发 的 事件 。 

onSelect: 当 文本 内 容 被 选择 时 的 事件 。 

onSelectStart: 当 文 本 内 容 选 择 将 开始 发 生 时 和 触发 的 事件 。 

(6) 数据 绑 定 

onAfterUpdate: 当 数 据 完成 由 数据 源 到 对 象 的 传送 时 触发 的 事件 。 

onCellChange: 当 数 据 来 源 发 生变 化 时 。 
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onDataAvailable: 当 数 据 接收 完成 时 触发 事件 。 

onDatasetChanged: 数据 在 数据 源 发 生变 化 时 触发 的 事件 。 

onDatasetComplete: 当 来 自 数据 源 的 全 部 有 效 数 据 读 取 完毕 触发 的 事件 。 

onErrorUpdate: 当 使 用 onBeforeUpdate 事件 触发 取消 了 数据 传送 时 ,代替 onAfter- 
Update 事件 。 

onRowEnter: 当前 数据 源 的 数据 发 生变 化 ,并 且 有 新 的 有 效 数据 时 触发 的 事件 。 

onRowExit: 当前 数据 源 的 数据 将 要 发 生变 化 时 触发 的 事件 。 

onRowsDelete: 当前 数据 记录 将 被 删除 时 触发 的 事件 。 

onRowsInserted: 当前 数据 源 将 要 插入 新 数据 记录 时 触发 的 事件 。 

(7) 外 部 事件 

onAfterPrint: 当 文档 被 打印 后 触发 的 事件 。 

onBeforePrint: 当 文档 即将 打印 时 触发 的 事件 。 

onFilterChange: 当 某 个 对 象 的 滤 镜 效果 发 生变 化 时 触发 的 事件 。 

onHelp: 当 浏 览 者 按 下 Fl 键 或 者 浏览 器 的 帮助 选择 时 触发 的 事件 。 

onPropertyChange: 当 对 象 的 属性 之 一 发 生变 化 时 触发 的 事件 。 

onReadyStateChange: 当 对 象 的 初始 化 属性 值 发 生变 化 时 触发 的 事件 。 


2. 事件 触发 


向 HTML 元 素 分 配 事件 ,使 用 事件 属性 ,设置 事件 属性 具体 动作 和 行为 。 
例 5-2-3-1 当 在 hl 二 元 素 上 单 击 时 ,改变 其 内 容 , 源 文档 如 下 : 


< !DOCTYPE html> 
<html> 
<head> 
<title>< /title> 
</head> 
<body> 
<hl onclick= "this.innerHTMI= 'Ooops!'"> 单 击 文本 !< /hl> 
</body> 
</htm> 


例 5-2-3-2 当 用 户 在 过 hl> 元 素 上 单 击 时 ,事件 处 理 器 调用 一 个 函数 改变 其 内 容 ， 
源 文档 如 下 : 


< !DOCTYPE html> 
<html> 
<head> 
<title>< /title> 
< script> function changetext (id) { id.innerHTML= "Ooops!"; }< /script> 
</head> 
<body> 
<hl onclick= "changetext (this)"> 单 击 文本 !< /hl> 





156 nsaisssnns 


< /body> 
</htm> 


HTML DOM 允许 使 用 JavaScript 向 HTML 元 素 分 配 事 件 ,如 例 5-2-3-3 所 示 。 
例 5-2-3-3 单 击 按钮 一 次 ,刷新 一 次 当前 时 间 , 源 文档 如 下 : 


< IDOCTYPE html> 
<html> 
<head> 
<title></title> 
<script> 
function displayDate () { document .getElementById ("myDate"). 
value=Date(); }; 
</script> 
</head> 
<body> 
<1label> 当前 时 间 :< /label> 
< input type= "text" id= "myDate" style= "width:150px;"/> 
< input type= "button" id= "myBtn" value= "刷新 日 期 "/> 
<script> 
displayDate(); 
document .getElementById ("myBtn") .onclick= function () 
{ displayDate () }; 
</script> 
< /body> 
</html> 


在 例 5-2-3-3 中 ,名 为 displayDate 的 函数 被 分 配给 id 一 "myBtn" 的 HTML 元 素 。 单 
击 按钮 时 displayDate 函数 将 会 被 执行 。 


524 HTM DOM 元 素 


1. 添加 HTML 元 素 


向 HTML DOM 添加 新 元 素 ,首先 创建 该 元 素 ( 元 素 节 点 ) ,然后 向 一 个 已 存在 的 元 
素 人 扎 加 该 元 素 ,如 例 5-2-4-1 所 示 。 

例 5-2-4-1 向 一 个 div 里 添加 元 素 p, 元 素 p 内 含 文本 节点 “这 是 一 个 新 段落 ”。 

(1) 源 文档 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
< /head> 
<body> 


语句 用 于 创建 新 的 二 p> 元 素 。 


<div id="divl"> 

<p id="p1"> 这 是 一 个 段落 。< /p> 

<p id="p2"> 这 是 另 一 个 段落 。< /p> 
</div> 
<script> 

Var para= document .createElement ("p"); 


var node= document .createTextNode ("这 是 一 个 新 段落 。"); 


para.appendchild (node); 


Var element= document .getElementById ("div1"); 


element .appendchild (para); 
</script> 
< /body> 
</html> 
(2) 运行 结果 
浏览 器 显示 结果 如 图 5.2 所 示 。 
(3) 实例 解析 


var para= document. createElement("p"); 


var node 王 document. createTextNode(" 这 


Ee 图 5.2 例 5-2-4-1. htm 的 浏览 器 显示 结果 
是 一 个 新 段落 。) ;语句 用 于 创建 文本 节点 。 


para. appendChild(node); 语句 向 二 p 之 元 素 追 加 文本 节点 。 
var element 一 document. getElementById("div1") ;语句 找到 一 个 已 有 divl 元 素 。 
element. appendChild(para); 向 一 个 divl 元 素 追 加 这 个 新 元 素 。 


2. 删除 HTML 元 素 


例 5-2-4-2 演示 了 删除 元 素 操 作 过 程 。 
例 5-2-4-2 从 divl 中 删除 p2 元 素 。 
(1) 源 文档 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
</head> 
<body> 
<div id="divl"> 
<p id="p1"> 这 是 一 个 段落 。< /p> 
<p ig="p2"> 这 是 另 一 个 段落 。< /p> 
</div> 
<script> 


Var parent= document .getElementById ("div1"); 


Var child= document .getElementById ("p1"); 
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Parent .removeChild (child); 
</script> 
< /body> 
</htm> 
(2) 运行 结果 
浏览 器 显示 如 图 5.3 所 示 。 
(3) 实例 解析 
var parent 一 document. getElementById 图 5.3 例 5-2-4-2.htm 的 浏览 器 显示 
("div1") ;语句 找 到 id= "div1" 的 元 素 。 
var child 王 document. getElementById("p1") ;语句 找到 id="p1" 的 二 p 过 元素 。 
parent. removeChild(child) ;语句 从 父 元 素 中 删除 子 元 素 。 





53 HIM BOM 


BOM(Browser Object Document) 是 浏览 器 对 象 模型 ,提供 独立 于 内 容 而 与 浏览 器 
窗口 进行 交互 的 功能 。BOM 主要 用 于 管理 窗口 与 窗口 之 间 的 通信 ,其 核心 对 象 是 
window。BOM 由 一 系列 相关 的 对 象 构成 ,并 且 每 个 对 象 都 提供 了 很 多 方法 与 属性 。 

BOM 包含 一 些 对 象 , 提供 不 同 功能 。window 对 象 可 以 移动 .调整 浏览 器 大 小 ， 
location 对 象 和 history 对 象 可 以 导航 ,navigator 与 screen 对 象 可 以 获取 浏览 器 ,操作 系 
统 与 用 户 屏幕 信息 ,document 对 象 可 以 使 用 作为 访问 HTML 文档 的 入口 ,frames 对 象 
用 于 管理 框架 。BOM 对 象 隶 属 关系 如 图 5.4 所 示 。 


window 


I I I I I 


document | frames[] | history | location 











navigation screen | 


























5.4 BOM 对 象 隶属 关系 


531 window 对 象 


BOM 使 JavaScript 有 能 力 与 浏览 器 “对 话 ”。 由 于 现代 浏览 器 已 经 实现 了 
JavaScript 交互 性 方面 的 相同 方法 和 属性 , 常 被 认为 是 BOM 的 方法 和 属性 。 

所 有 浏览 器 都 支持 window 对 象 , 它 表 示 浏 览 器 窗口 。 所 有 JavaScript 全 局 对 象 . 函 
数 以 及 变量 均 自动 成 为 window 对 象 的 成 员 。 全 局 变量 是 window 对 象 的 属性 。 全 局 函 
数 是 window 对 象 的 方法 。HTML DOM 的 document 也 是 window 对 象 的 属性 之 一 ,如 
下 所 示 : 





window.document .getElementById ("header"); 


为 简化 表达 ,实际 中 常 省 略 window ,写成 : 
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document .getElementById ("header"); 
1. Window 尺寸 


有 3 种 方法 能 够 确定 浏览 器 窗口 的 尺寸 (浏览 器 的 窗口 ,不 包括 工具 栏 和 滚动 条 ) 。 

(1) Internet Explorer、Chrome、Firefox、Opera 及 Safari 浏览 器 的 确定 方法 

高 度 : window. innerHeight 一 一 浏览 器 窗口 的 内 部 高 度 ; 

宽度 : window. innerWidth 一 一 浏览 器 窗口 的 内 部 宽度 。 

(2) Internet Explorer 8.7.6.5 浏览 器 的 确定 方法 

高 度 : document. documentElement. clientHeight; 

宽度 : document. documentElement. clientWidth; 

或 者 

高 度 : document. body. clientHeight; 

宽度 : document. body. clientWidth; 

(3) 实用 的 JavaScript 方案 (适用 于 所 有 浏览 器 ) 

宽度 ; var h 二 window. innerHeight | document. documentElement. clientHeight 
| document. body. clientHeight; 

高 度 : var w 二 window. innerWidth | document. documentElement. clientWidth 


| document. body. clientWidth; 
2. 一 些 常用 的 方法 
一 些 常用 的 方法 如 表 5. 1 所 示 。 演 示 如 例 5-3-1-1 所 示 。 


表 5.1 一 些 常用 的 方法 
描 述 





window. alert(" 提 示 信 息 ") 显示 包含 消息 的 警示 框 





window. confirm( "确认 信息 ") 显示 一 个 确认 对 话 框 ,包含 确定 和 取消 按钮 





window. prompt(" 提 示 信 息 ") 弹出 提示 信息 框 





打开 具有 指定 名 称 的 新 窗口 ,并 加 载 指定 URL 给 定 的 文档 ;如 果 没 
有 提供 URL., 则 打开 一 个 空 文档 


window. open("url","name") 





关闭 顶层 浏览 器 窗口 。 某 个 窗口 可 以 通过 调用 self. close() 或 只 调 





window. close() 用 close() 来 关闭 其 自身 。 只 有 通过 JavaScript 代码 打开 的 窗口 才 
能 由 JavaScript 代码 关闭 。 这 阻止 了 恶意 的 脚本 终止 用 户 的 浏览 器 
window. moveTo(x,y) 移动 当前 窗口 到 (x,y) 处 








window. resizeTo(Cwidth,height) | 调整 当前 窗口 宽 为 width, 高 为 height, 单 位 是 像素 


例 5-3-1-1 打开 文档 示例 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
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<head> 
<title></title> 
< script type= "text/javascript"> 
function openWindow() { 
myWindows=window.open ("http://www.ldu.edu.cn", "和 角 东 大 学 "); 
} 
function closeWindow() { myWindows.close(); } 
</seript> 
< /head> 
<body> 
<input type= 'button' value= ' 鲁 东 大 学 ' onclick= 'openWindow();' /> 
<input type= 'button' value= ' 关 闭 鲁 东 大 学 ' onclick= 'closeWindow();"' /> 
<input type= 'button' value= 'alert 演示 ' onclick= 'alert ("出 现 错误 1");' /> 
<input type= "button' value= 'prompt 演示 ' onclick= "prampt ("成 功 关 闭 ");"' /> 
<input type= 'button' value= 'confirm 演 示 ' onclick= 'confim(" 结 束 演示 ?");' /> 
< /body> 
</html> 


532 计时 事件 


计时 事件 是 BOM 的 一 个 重要 方法 。 在 一 个 设 定时 间 间 隔 之 后 执行 JavaScript 代 
码 ,而 不 是 在 函数 被 调用 后 立即 执行 ,被 称 为 计时 事件 。 

在 JavaScript 中 使 用 计时 事件 有 如 下 两 个 方法 : 

中 setInterval(): 间隔 指定 的 毫秒 数 不 停 地 执行 指定 的 代码 。 

@ setTimeout(): 暂停 指定 的 毫秒 数 后 执行 指定 的 代码 。 


1. setInterval() 方法 


setInterval() 间隔 指定 的 毫秒 数 不 停 地 执行 指定 的 代码 ,语法 如 下 : 
window.setInterval ("javascript function",milliseconds); 


window. setInterval() 方 法 可 以 不 使 用 window 前 绥 ,直接 使 用 函数 setInterval()。 

setInterval() 的 第 一 个 参数 是 函数 (function) ,第 二 个 参数 是 间隔 的 毫秒 数 (1000 毫 
秒 是 1 秒 )。 

例如 : 每 3 秒 弹 出 "hello" ,可 写成 


setInterval (function () {alert ("Hello") }, 3000); 
例 5-3-2-1 类 似 手表 一 样 显示 当前 时 间 , 源 文档 如 下 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/zxhtml"> 
<head> 
<title></title> 
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5 个 *= HTML DOM 


< /head> 
<body> 
<label id="m date">< /label> 
< script type= "text/javascript"> 
Var myVar= setInterval (function () { myTimer() }, 1000); 
function myTimer () { 
Var d=new Date () 7 
var t=d.toLocaleTimestring(); 
document .getElementById ("m date") .innerHTMI=t; 
} 
</script> 
< /body> 
</html> 


2. clearInterval() 方 法 
clearInterval() 方 法 用 于 停止 setInterval() 方 法 执行 的 函数 代码 ,语法 如 下 : 


window.clearInterval (intervalVariable); 


window. clearInterval() 方 法 可 以 不 使 用 window 前 级 ,直接 使 用 函数 clearInterval()。 
使 用 clearInterval() 方 法 前 ,创建 计时 方法 时 使 用 全 局 变量 ,语句 如 下 : 


myVar= set Interval ("javascript function",milliseconds); 


然后 使 用 clearInterval() 方 法 停止 执行 。 


例 5-3-2-2 类 似 手 表 一 样 显示 当前 时 间 , 按 停止 按钮 停止 计时 , 按 启动 按钮 继续 计 


时 , 源 文档 如 下 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title>< /title> 
< /head> 
<body> 
< input type= "button" onclick="Start ();" value=" 启 动 "/> 
< input type= "button" onclick= "Stop();" value= "停止 "/> 
<label id="m date">< /label> 
< script type= "text/javascript"> 
Var myTimer; 
function Start () { if (myTimer==null) myTimer= setInterval (Run, 
1000);} 
function RuNn() { 
Var dnew Date () 7 
Var t=d.toLocaleTimestring (); 
document .getElementById ("m date") .innerHTIMI—=t; 
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} 
function Stop () { if (myTimer !=null) { clearInterval (myTimer); myTimer= 
null; } } 
Start (); 
</script> 
< /body> 
</html> 


setTimeout() 和 clearTimeout() 方 法 与 setInterval() 和 clearInterval() 方 法 的 用 法 
类 似 , 不 再 重复 。 





533 Cookie 


Cookie 用 于 存储 Web 页 面 的 用 户 信息 ,将 用 户 数据 以 文本 形式 存储 于 本 地 电脑 的 
文件 中 。 当 Web 服务 器 向 浏览 器 发 送 Web 页 面 时 ,连接 关闭 后 ,服务 器 端 不 会 记录 用 户 
的 信息 。Cookie 的 作用 是 记录 客户 端的 用 户 信息 。 用 户 访问 Web 页 面 时 ,用 户 名 、 密 码 
等 信息 可 以 记录 在 Cookie 中 。 下 一 次 访问 该 页 面 时 ,可 以 在 Cookie 中 读 取 用 户 访问 记 
录 。Cookie 以 名 / 值 对 形式 存储 ,如 下 所 示 : 


username= John Doe 

当 浏览 器 从 服务 器 上 请 求 Web 页 面 时 ,属于 该 页 面 的 cookie 会 被 添加 到 该 请 求 中 。 
服务 器 端 通过 这 种 方式 获取 用 户 的 信息 。JavaScript 可 以 使 用 document. cookie 属性 来 
创建 . 读 取 及 删除 cookie。 

1. 创建 Cookie 


JavaScript 创建 cookie 如 下 所 示 : 
document .cookie= "username= John Doe"; 


可 以 为 cookie 添加 一 个 过 期 时 间 ( 以 UTC 或 GMT 时 间 为 准 )。 在 默认 情况 下 ， 
cookie 在 浏览 器 关闭 时 删除 。 例 如 ,用 户 John Doe 的 过 期 时 间 为 2013 年 12 月 18 日 12 
点 整 , 写 成 : 


document .cookie= "username= John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"; 


可 以 使 用 path 参数 告诉 浏览 器 cookie 的 路 径 。 默 认 情 况 下 ,cookie 属于 当前 页 面 。 
下 面 语句 中 的 path 二 /表示 设 为 根 目 录 : 





document .cookie= "username= John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path= /"7 
2. 读 取 Cookie 


JavaScript 读 取 cookie 如 下 所 示 : 


Var X= document .cookie; 
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document. cookie 以 字符 串 方 式 返 回 所 有 的 cookie, 类 型 格式 如 下 : 

cookiel=value; cookie2=value; cookie3=value; 

3. 修改 Cookie 

JavaScript 修改 cookie 类 似 于 创建 cookie, 新 的 cookie 覆盖 旧 的 cookie, 如 下 所 示 : 
document .cookie= "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; 
4. 删除 Cookie 


删除 cookie 需要 设置 expires 参数 为 以 前 的 时 间 即 可 ,不 必 指 定 cookie 的 值 ,如 下 所 
示 ,设置 为 Thu, 01 Jan 1970 00:00:00 GMT: 


document .cookie= "username= ; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 

5. Cookie 字符 串 

document. cookie 属性 看 起 来 像 一 个 普通 的 文本 字符 串 , 其 实 不 是 。 即 使 在 
document. cookie 中 写 人 一 个 完整 的 cookie 字符 串 , 重新 读 取 cookie 信息 时 ,cookie 信 
息 也 是 以 名 / 值 对 形式 展示 的 。 


如 果 设 置 了 新 cookie 数据 项 , 原 有 的 cookie 数据 项 不 会 被 覆盖 。 新 cookie 数据 项 
将 添加 到 document. cookie 中 ,所 以 如 果 重 新 读 取 document. cookie, 将 获得 如 下 数据 : 


cookiel=value; cookie2=value; 


如 果 查 找 一 个 指定 cookie 值 , 须 创建 一 个 JavaScript 函数 ,在 cookie 字符 串 中 查找 
cookie 值 。 


54 上 机 实验 样 例 


1. 实验 目的 
掌握 cookie 的 应 用 。 
2. 功能 描述 


创建 cookie, 存 储 访问 者 名 称 。 访 问 者 下 一 次 访问 页 面 时 ,会 看 到 一 个 欢迎 的 消息 。 
首先 ,访问 者 访问 Web 页 面 ,填写 自己 的 名 字 , 该 名 字 会 存储 在 cookie 中 。 创 建 如 下 3 
个 函数 ,以 封装 cookie 的 访问 。 

(1) 设置 cookie 值 的 函数 。 

(2) 获取 cookie 值 的 函数 。 

(3) 检测 cookie 值 的 函数 。 
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3. 实验 步骤 


(1) 启动 VS2010。 
(2) 打开 网 站 “HTML 实用 网 页 设计 技术 / 源 程序 /实验 /5-3-3-cookie”。 
(3) 打开 cookie. js, 源 程序 如 下 。 


function setCookie (cname, cvalue,exdays) 
{ 
Var d=new Date () 7 
d.setTime (d.getTime ()+ (exdays * 24* 60* 60x 1000)); 
Var expires= "expires= "+d.toGMTString (); 
document .cookie= cname+ "= "+ Cvalue+ "; "+expires; 
} 
function getCookie (Cname) 
{ 
Var name= cname+ "一 "7 
Var ca= document .cookie.split (';"'); 
for (var i=0; i<ca.length; i++) 
{ 
Var c=cal[lil] .trim(); 
if (c.indexOf (name)==0) return c.substring (name.length, c.length); 
} 
return ""7 
} 
function checkCookie () 
{ 
var username= getCookie ("username"); 
if (username!="") { alert("Welcome again "+username); } 
else 
. 
username=pronmpt ("Please enter your name:",""); 
if (username!="" && Username!=null) 


{ setCookie ("username", username, 365); } 


t 


setCookie(cname，cvalue，exdays) 函数 设置 cookie 值 。 其 函数 的 参数 中 ,cookie 的 
名 称 为 cname,cookie 的 值 为 cvalue, 并 设置 了 cookie 的 过 期 时 间 expires。 该 函数 设置 
了 cookie 名 cookie 值 cookie 过 期 时 间 。 

getCookie(cname) 函数 获取 cookie 值 。cookie 名 的 参数 为 cname。 

checkCookie() 创 建 了 一 个 检测 cookie 是 否 创建 的 函数 。 如 果 设 置 了 cookie, 将 显示 
一 个 问候 信息 。 如 果 没 有 设置 cookie, 将 会 显示 一 个 弹 窗 ,用 于 询问 访问 者 的 名 字 , 并 调 
用 setCookie 函数 ,将 访问 者 的 名 字 存 储 365 天 。 


# 合 * HTML DOM 
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(4) 双击 cookie. htm 文档 , 源 文档 如 下 。 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src= "cookie.js" type= "text/javascript">< /script> 
< /head> 
<body onload= "checkCookie ();"> 
< /body> 
</htm> 


(5) 在 浏览 器 中 首次 浏览 cookie. htm, 如 图 5.5 所 示 。 


O http:htm X 
€ OD localhost3 辐 照 x 
回 火狐 官方 站 点 园 最 党 访问 » 口 移 动 设 备 上 的 书签 





























5.5 首次 浏览 cookie. htm 界面 


在 图 5.5 中 输入 1234, 单 击 “ 确 定 ” 按 钮 后 ,结果 如 图 5.6 所 示 。 单 击 浏览 器 ,重新 载 


入 当前 页 面 图 标 , 结 果 如 图 5.7 所 示 。 


http://...kie.htm XX D http:htm Xx 
所 DO localhost3 加 器 © 所 | localhost3 加 跟 x | ? 
加 官方 站 点 加 最 党 访问 ,” 口 移动 设备 上 的 书签 加 到 官方 站 点 图 最 党 访问 ,， 口 移动 设备 上 的 书签 


Welcome again 1234 

















图 5.6 单 击 图 5.5 的 确定 按钮 后 的 界面 图 5.7 第 二 次 浏览 cookie. htm 的 界面 
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55 实验 任务 


1. 实验 题目 
DOM 事件 响应 脚本 程序 设计 。 
2. 程序 功能 


综合 利用 所 学 的 标签 和 CSS 设计 一 个 画图 网 页 , 含 横 向 水 平 主 菜单 、 纵 向 树 形 面板 
和 客户 区 。 横 向 水 平 主 菜 单 含有 长 方形 . 圆 、 萎 形 、 正 方形 .椭圆 5 个 菜单 项 。 纵 向 树 形 
面板 含有 线 型 .颜色 ,动静 3 个 选项 , 线 型 含有 实 线 、 虚 线 2 个 子 项 ,颜色 含有 红 、 绿 、 蓝 3 
个 子 项 ,动静 含有 动 和 静 2 个 子 选项 。 单 击 长 方形 ,客户 区 显示 长 方形 。 单 击 正方 形 , 客 
户 区 显示 正方 形 。 单 击 线 型 ,当前 图 形 线 型 改变 。 单 击 颜色 ,当前 图 形 的 边框 和 填充 颜 
色 同 步 改变 。 


3. 实验 目的 


(1) 掌握 DOM 事件 的 运用 方法 。 
(2) 掌握 DOM 动态 添加 .删除 HTML 元 素 的 方法 。 
(3) 掌握 运用 DOM CSS 改变 元 素 样式 的 方法 。 


4. 实验 类 型 
综合 设计 。 
5. 实验 要 求 


(1) 脚本 程序 完全 运用 JavaScript 程序 实现 。 
(2) 用 DOM 添加 删除 元 素 显 示 客 户 区 图 形 。 











6. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB、 主 频 1.8GHz 及 以 上 、 硬 盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010 或 Adobe Dreamweaver。 

(4) 浏览 器 : IE9 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 


7. 实验 原理 


DOM 事件 .CSS 和 添加 删除 元 素 直 接 相关 的 JavaScript 语句 ,并 辅 以 必要 的 说 明 与 
分 析 。 
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8. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 所 遇 到 的 全 部 错误 现象 描述 。 
(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 监视 变量 值 。 
9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 


图 知识 目标 

。 掌握 jQuery 的 安装 方法 

。 理解 引入 jQuery 的 必要 性 

。 掌握 jQuery 选择 器 与 基本 事件 处 理 方法 

。 掌握 jQuery 操纵 HTML .CSS 的 技术 

。 掌握 jQuery 动态 添加 、 删 除 元 素 的 方法 

。 掌握 jQuery Ajax 与 ASP. NET 服务 器 进行 交互 的 技术 
图 能 力 目标 

。 根据 实际 需求 处 理 目 标 元 素 的 适当 事件 

。 根据 需要 异步 加 载 数据 的 元 素 , 运 用 Ajax 实现 局 部 刷新 
。 根据 美工 .布局 和 业务 需求 快速 开发 动态 网 页 

图 素质 目标 

。 根据 实际 需求 ,运用 jQuery 编写 简洁 高 效 的 脚本 程序 

。 根据 应 用 需求 恰当 选择 鼠标 与 键盘 事件 和 相应 的 jQuery 处 理 技术 
图 教学 重点 

。 jQuery HTML、CSS、 按 键 解析 、 事 件 处 理 


图 教学 难点 

。 异步 事件 的 跟踪 调试 
图 建议 学 时 

a 理论 : 4 学 时 

。 实验 : 4 学 时 


61 和 概 水 


jQuery 是 一 个 快速 .简洁 的 JavaScript 框架 ,是 继 Prototype 之 后 又 一 个 优秀 的 
JavaScript 框架 。jQuery 设计 的 宗旨 是 Write Less,Do More, 即 倡导 写 更 少 的 代码 ,做 
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更 多 的 事情 。 它 封装 JavaScript 的 常用 功能 代码 ,提供 一 种 简便 的 JavaScript 设计 模式 ， 
优化 HTML 文档 操作 ,事件 处 理 、 动 画 设 计 和 Ajax 交互 。 

jQuery 的 核心 特性 概括 为 : 具有 独特 的 链 式 语法 和 短小 清晰 的 多 功能 接口 ;具有 高 
效 灵 活 的 CSS 选择 器 ,并 且 可 对 CSS 选择 器 进行 扩展 ;拥有 便捷 的 插件 扩展 机 制 和 丰富 
的 插件 。jQuery 兼容 各 种 主流 浏览 器 ,如 IE 6.0 以 上 版 本 .Safari 2.0 以 上 版 本 .Opera 
9.0 以 上 版 本 。 


1. 编程 开发 














运行 jQuery 所 需 的 条 件 很 简单 : 一 台 计 算 机 ,一 个 智能 电话 或 一 个 可 以 运行 现代 浏 
览 器 的 设备 。jQuery 对 浏览 器 的 要 求 也 相当 自由 。 官 方 网 站 列 出 了 下 列 支 持 jQuery 的 
浏览 器 : Firefox 2.0 以 上 版 本 IE 6.0 以 上 版 本 ,Safari 3.0 以 上 版 本 .Chrome 8.0 以 上 
版 本 。 


2. 语言 特点 


(1) 快速 获取 文档 元 素 

jQuery 的 选择 机 制 构建 于 CSS 选择 器 ,提供 了 快速 查询 DOM 文档 中 元 素 的 功能 ， 
而 且 极 大 强化 了 JavaScript 中 获取 页 面 元 素 的 方式 。 

(2) 提供 漂亮 的 页 面 动态 效果 

jQuery 中 内 置 了 一 系列 动画 效果 ,可 以 开发 出 非常 漂亮 的 网 页 ,许多 网 站 都 使 用 
jQuery 的 内 置 效果 ,比如 淡 入 淡出 .元素 移 除 等 动态 特效 。 

(3) 创建 Ajax 局 部 刷新 网 页 

Ajax 是 异步 JavaScript 和 XML 的 简称 ,可 以 开发 出 动态 局 部 刷新 网 页 。 特 别 是 开 
发 服务 器 端 网 页 时 ,比如 PHP 网 站 ,需要 频繁 地 与 服务 器 通信 ,如 果 不 使 用 Ajax, 每 次 数 
据 更 新 不 得 不 重新 刷新 网 页 ,而 使 用 Ajax 特效 后 ,可 以 对 页 面 进行 局 部 刷新 ,提供 动态 
效果 。 

(4) 对 JavaScript 语言 结构 的 增强 

jQuery 提供 了 对 基本 JavaScript 结构 的 增强 ,比如 元 素 和 迭代 和 数组 处 理 等 操作 。 

(5) 增强 的 事件 处 理 

jQuery 提供 了 各 种 页 面 事件 ,可 以 避免 程序 员 在 HTML 中 添加 大 量 事件 处 理 代码 ， 
而 且 其 事件 处 理 器 消除 了 各 种 浏览 器 兼容 性 问题 。 

(6) 更 改 网 页 内 容 

jQuery 可 以 修改 网 页 中 的 内 容 ,比如 更 改 网 页 的 文本 、 插 和 或 者 翻转 网 页 图 像 ， 
jQuery 简化 了 原本 使 用 JavaScript 代码 需要 处 理 的 方式 。 


3. 语言 基础 


(1) 选择 器 
jQuery 选择 器 允许 对 HTML 元 素 组 或 单个 元 素 进 行 操 作 ,基于 元 素 的 id、 类 、 类 型 、 
属性 .属性 值 等 “查找 ”( 或 选择 ) HTML 元 素 。 它 基于 已 经 存在 的 CSS 选择 器 , 除 此 之 
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外 ,还 有 一 些 自 定义 的 选择 器 。jQuery 中 的 所 有 选择 器 都 以 美元 符号 开头 : $ ()。 

人 元 素 选择 器 。 

jQuery 元 素 选 择 器 基于 元 素 名 选取 元 素 。 如 $("p") 用 于 在 页 面 中 选取 所 有 二 p 放 
元 素 。 

@ id 选择 器 。 

jQuery #id 选 择 器 通过 HTML 元 素 的 id 属性 选取 指定 的 元 素 。 页 面 中 元 素 的 id 
应 该 是 唯一 的 ,所 以 要 在 页 面 中 选取 唯一 的 元 素 , 需 要 通过 #id 选择 器 。 通 过 id 选取 元 
素 语 法 的 语句 如 下 : 


$ ("#test") 


@@ class 选择 器 。 
jQuery 类 选择 器 可 以 通过 指定 的 class 查找 元 素 。 语 法 如 下 : 


$(".test") 


(2) 事件 处 理 
在 jQuery 中 ,大 多 数 DOM 事件 都 有 一 个 等 效 的 jQuery 方法 。 
在 页 面 中 指定 一 个 单 击 事件 : 


$("p") .click(); 
下 面 通过 一 个 函数 实现 事件 响应 动作 : 
$ ("p") .click (function (){ }); 


4. 技术 应 用 


(1) 网 站 

只 需要 少量 代码 , 即 可 将 它们 集成 到 网 站 上 ,并 且 能 够 帮助 访问 者 分 享 网 站 上 的 
内 容 。 
(2) 移动 端 
jQuery Mobile 1. 2 是 jQuery 运行 在 手机 和 平板 设备 上 的 版 本 。jQuery Mobile 1.2 
为 主流 移动 平台 提供 了 jQuery 的 核心 库 , 发 布 了 一 个 完整 统一 的 jQuery 移动 UI 设计 
框架 ,在 不 同 的 智能 手机 和 桌面 电脑 的 Web 浏览 器 上 形成 统一 的 用 户 UI。 支 持 全 球 主 
流 的 移动 平台 ,对 每 个 平台 的 支持 分 为 A、B、C 3 个 等 级 ,实现 了 对 Android 2. 1 一 2. 3、 
3.2 .4.0 .4.1,Windows Phone 7~7.5,Palm WebOS 1.4~2.0.,3.0,Firefox Mobile 15， 
Opera Mobile 11.5 一 12 等 平台 的 A 级 支持 。jQuery Mobile 1. 2 的 核心 使 得 基本 的 
HTML 标签 在 所 有 的 浏览 器 中 生效 ,并 且 对 网 页 的 行为 和 效果 均 进 行 了 增强 ,使 网 页 在 
等 级 较 高 的 浏览 器 中 能 获得 优秀 的 体验 ,在 较 差 的 浏览 器 中 也 能 正常 使 用 。 
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62 基础 知 还 


621 jQuery 的 安装 


可 以 通过 以 下 方法 在 网 页 中 添加 jQuery。 

(1) 从 jquery. com 下 载 jQuery 库 。 

(2) 从 CDN 中 载 人 jQuery, 如 从 Google 中 加 载 jQuery。 

有 两 个 版 本 的 jQuery 可 供 下 载 。 

(1) Production version: 用 于 实际 的 网 站 中 ,已 被 精简 和 压缩 。 

(2) Development version: 用 于 测试 和 开发 (未 压缩 ,是 可 读 的 代码 )。 

以 上 两 个 版 本 都 可 以 从 jquery. com 中 下 载 。 

jQuery 库 是 一 个 JavaScript 文件 ,使 用 HTML 的 二 script 二 标签 来 引用 ,如 下 所 示 。 


<head> 
<script src="jquery-1.10.2.min.js">< /script> 
< /head> 


将 下 载 的 文件 放 在 网 站 内 的 一 个 目录 下 ,也 可 以 使 用 jQuery。 

百度 、 又 拍 云 .新 浪 、 谷 歌 和 微软 的 服务 器 都 存 有 jQuery。 如 果 站 点 是 国内 用 户 , 建 
议 使 用 百度 、 又 拍 云 .新 浪 等 国内 CDN 地 址 。 许 多 用 户 访问 其 他 站 点 时 ,已 经 从 百度 、 又 
拍 云 新浪、 谷歌 或 微软 加 载 过 jQuery。 当 他 们 再 次 访问 这 些 站 点 时 ,会 从 缓存 中 加 载 
jQuery, 以 减少 加 载 时 间 。 同 时 ,大 多 数 CDN 都 可 以 确保 当 用 户 向 其 请 求 文件 时 ,会 从 
离 用 户 最 近 的 服务 器 上 返回 响应 ,这 样 也 可 以 提高 加 载 速度 。 否 则 ,如 果 站 点 是 国外 的 ， 
可 以 使 用 谷歌 和 微软 。 

如 需 从 菜鸟 教程 .又 拍 云 新浪、 谷歌 或 微软 引用 jQuery ,请 使 用 以 下 代码 之 一 。 

Q@ 菜鸟 教程 CDN。 


<head> 
< Script src="http://cdn. static. runoob. com/libs/jquery/1. 10.2/jquery.min.js"></ 
script> 

</head> 


@ 百度 CDN。 


<head> 
< script src="https://apps .bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
< /head> 


@ 又 拍 云 CDN。 


<head> 
< script src="http://upcdn. b0. upaiyun. com/libs/jquery/jquery- 2.0.2.min.js"></ 
script> 
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< /head> 
@ 新 浪 CDN。 


<head> 
< script src="http://lib. sinaapp. com/js/jquery/2. 0. 2/jquery- 2.0.2.min.js"></ 
script> 

< /head> 


@ 谷歌 CDN。 

<head> 
< script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></ 
script> 

< /head> 

@ 微软 CDN。 

<head> 
< script src="http://ajax. htmlnetcdn. com/ajax/jQuery/jquery- 1. 10.2.min. js"> </ 
Script> 

</head> 


622 jQuery 语法 

使 用 jQuery 可 以 选取 HTML 元 素 ,并 对 它们 执行 “操作 ”。jQuery 的 语法 功能 是 选 
取 HTML 元 素 , 并 对 选取 的 元 素 执行 某 些 操作 。 其 通用 格式 如 下 : 

$ (selector) .action () 7 


用 美元 符号 定义 jQuery。 用 选择 符 (selector)“ 查 询 ” 和 “查找 ”HTML 元素。 用 
action() 执 行 对 元 素 的 操作 。 例 如 : 


$ (document) .ready (function () { 


$ (this) .hide()7 // 隐 藏 当前 元 素 ; 

$("p") .hide (); // 隐 藏 所 有 <p> 元 素 ; 

$ ("p.test") .hige (); // 隐 藏 所 有 class="test" 的 <p> 元 素 ; 
$ ("#test") .hige (); // 隐 藏 所 有 id="test" 的 元 素 


nD; 


以 上 实例 中 的 所 有 jQuery 函数 位 于 document ready 函数 中 。 以 防止 文档 在 完全 加 
载 (就 绪 ) 之 前 运行 jQuery 代码 。 如 果 在 文档 没有 完全 加 载 之 前 就 运行 函数 ,操作 可 能 
失败 。 


623 jQuery 选择 器 


jQuery 选择 器 选择 需要 操作 的 HTML 元 素 组 或 单个 元 素 ,基于 元 素 的 id、 类 、 类 型 、 
属性 ,属性 值 等 “查找 ”( 或 选择 )HTML 元 素 。 它 基于 已 经 存在 的 CSS 选择 器 , 除 此 之 
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外 ,还 有 一 些 自 定义 的 选择 器 。jQuery 中 的 所 有 选择 器 都 以 美元 符号 开头 : $ ()。 
1. 元 素 选 择 器 


jQuery 元 素 选择 器 基于 元 素 名 选取 元 素 。 如 用 户 单 击 按钮 后 ,所 有 所 p 之 元 素 都 
隐藏 。 


$ (document) .ready (function (){ 
S$("button") .click (function (){ 
$("p") .hide ()7 
Ds; 
D; 


2，#id 选择 器 
jQuery #id 选择 器 选取 特定 HTML 元 素 的 id 属性 值 的 元 素 。 页 面 中 元 素 的 id 应 
该 是 唯一 的 ,所 以 要 在 页 面 中 选取 唯一 的 元 素 , 需 要 通过 #id 选择 器 。 如 当 用 户 单 击 按 
钮 后 ,有 id 一 "test" 属 性 的 元 素 将 被 隐藏 。 
$ (document) .ready (function (){ 
$ ("button") .click (function (){ 
$("#test") .hide (); 


D; 
D; 


3. .class 选择 器 


jQuery 类 选择 器 查找 指定 class 属性 值 的 元 素 。 如 用 户 单 击 按钮 后 ,所 有 带 class 一 
"test" 属性 的 元 素 都 隐藏 。 


$ (document) .ready (function (){ 
$ ("button") .click(function (){ 
$(".test") .hide (); 
D; 
nD; 


4. 更 多 实例 
jQuery 的 更 多 选择 器 实例 如 表 6. 1 所 示 。 
表 6.1 jQuery 的 更 多 选择 器 实例 
语 法 描 述 
家 人 选取 所 有 元 素 
$ (this) 选取 当前 HTML 元 素 
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语 法 


描 





("p.intro") 


选取 class 为 intro 的 二 p 二 元 素 





("p:first") 


选取 第 一 个 二 p 二 元 素 





(Cul li:first") 


选取 第 一 个 一 ul 元素 的 第 一 个 一 1i 一 元 素 





$("ul li:first-child") 


选取 每 个 和 二 ul 二 元 素 的 第 一 个 二 1i 一 元 素 





("Lhref]") 


选取 带 有 href 属性 的 元 素 





» ("al target=" blank']") 


选取 所 有 target 属性 值 等 于 "_blank" 的 二 a 二 元 素 





("a[f target!="_blank']") 


选取 所 有 target 属性 值 不 等 于 "_blank" 的 二 a 二 元 素 





; (" :button") 


选取 所 有 type 二 "button" 的 二 input 二 元 素 和 二 button 二 元 素 
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("tr:even") 选取 偶数 位 置 的 二 tr 二 元 素 
$ ("tr:odd") 选取 奇数 位 置 的 二 tr 二 元 素 


jQuery 是 为 事件 处 理 特别 设计 的 。 页 面 对 不 同 访问 者 的 响应 叫做 事件 。 事 件 处 理 
程序 指 的 是 当 HTML 中 发 生 某 些 事件 时 所 调用 的 方法 。 在 元 素 上 移动 鼠标 、 选 取 单 选 


按钮 . 单 击 元 素 都 属于 事件 。 


在 事件 中 常 使 用 术语 “触发 "。 例 如 , 当 用 户 按 下 按键 时 触发 keypress 事件 。 常 见 


DOM 事件 如 表 6. 2 所 示 。 


表 6.2 常见 DOM 事件 





























鼠标 事件 键盘 事件 表单 事件 文档 /窗口 事件 
click keypress submit load 
dblclick keydown change resize 
mouseenter keyup focus scroll 
mouseleave blur unload 
mouseover 
mouseout 
mousedown 
mouseup 
mousemove 











在 jQuery 中 ,大 多 数 DOM 事件 都 有 一 个 等 效 的 jQuery 方法 。 页 面 中 指定 一 个 


击 事件 ,语法 如 下 : 


$ ("Pp") .click(); 


单 
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下 一 步 是 定义 触发 事件 后 的 具体 处 理 , 通 过 以 下 事件 函数 实现 : 


$("p") .click (function () { 
// 动 作 触 发 后 执行 的 代码 !! 
nD; 


1. 文档 就 绪 事 件 

$ (document). ready() 方法 定义 在 文档 完全 加 载 完 后 执行 的 函数 。 该 事件 方法 在 
jQuery 语法 章节 中 已 经 提 过 。 

2. 单 击 元 素 事件 

单 击 元 素 时 ,会 发 生 click 事件 。click() 方 法 是 当 按 钮 单 击 事件 被 触发 时 调用 的 一 


个 函数 。 该 函数 在 单 击 HTML 元 素 时 执行 。 如 当 单 击 事件 在 某 个 二 p 二 元 素 上 触发 时 
隐藏 当前 的 二 p 二 元 素 。 
$ ("Pp") .click (function (){ 
$ (this) .hide (); 
D; 


3. 双击 元 素 事件 
双击 元 素 时 ,会 发 生 dblclick 事件 。dblclick() 方 法 触发 dblclick 事件 ,或 规定 当 发 生 
dblclick 事件 时 运行 的 函数 。 例 如 : 


$ ("p") .click (function (){ 
$ (this) .hide (); 
D; 


4. 鼠标 穿 过 元 素 事件 
鼠标 穿 过 元 素 时 ,会 发 生 mouseenter 事件 。mouseenter() 方法 触发 mouseenter 事 
件 ,或 规定 发 生 mouseenter 事件 时 运行 的 函数 。 例 如 : 


$ ("#p1") .mouseenter (function (){ 
alert (' 您 的 鼠标 移 到 了 id= "pl" 的 元 素 上 1!'); 
nD; 


5. 鼠标 离开 元 素 事 件 


鼠标 指针 离开 元 素 时 ,会 发 生 mouseleave 事件 。mouseleave() 方 法 触发 mouseleave 
事件 ,或 规定 发 生 mouseleave 事件 时 运行 的 函数 。 例 如 : 


$ ("#p1") .mouseleave (function (){ 
alert ("再 见 ,您 的 鼠标 离开 了 该 段落 。"); 
nD; 
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6. 鼠标 按 下 事件 


鼠标 移动 到 元 素 上 方 并 按 下 鼠标 时 ,会 发 生 mousedown 事件 。mousedown() 方法 
触发 mousedown 事件 ,或 规定 发 生 mousedown 事件 时 运行 的 函数 。 例 如 : 
$ ("#p1") .mousedown (function (){ 
alert ("鼠标 在 该 段落 上 按 下 1"); 
nD; 


7. 鼠标 松 开 事件 

在 元 素 上 松 开 鼠 标 时 ,会 发 生 mouseup 事件 。mouseup() 方 法 触发 mouseup 事件 ， 
或 规定 发 生 mouseup 事件 时 运行 的 函数 。 例 如 : 

$ ("#p1") .mouseup (function () { 


alert ("鼠标 在 段落 上 松 开 。"); 
D; 


8. 鼠标 悬 停 事 件 


hover() 方 法 用 于 模拟 光标 悬 停 事件 。 鼠 标 移动 到 元 素 上 时 ,会 触发 指定 的 第 1 个 函 
数 (mouseenter)。 鼠 标 移出 这 个 元 素 时 ,会 触发 指定 的 第 2 个 函数 (mouseleave)。 例 如 : 
$ ("#p1") .hover ( 
function () { alert ("你 进入 了 pl!"); }, 
function () { alert ("拜拜 ! 现在 你 离开 了 pl1!"); } 
) 7 


9. 获得 焦点 事件 
元 素 获得 焦点 时 ,发生 focus 事件 。 当 单 击 选中 元 素 或 通过 Tab 键 定位 到 元 素 时 ,该 


元 素 就 会 获得 焦点 。focus() 方 法 触发 focus 事件 ,或 规定 发 生 focus 事件 时 运行 的 函数 。 
例如 : 


$ ("input") .focus (function (){ 
$ (this) .css ("background- color", "#cccccc"); 


nD; 
10. 失去 焦点 事件 


元 素 失 去 焦点 时 ,发 生 blur 事件 。blur() 方 法 触发 blur 事件 ,或 规定 发 生 blur 事件 
时 运行 的 函数 。 例 如 : 





$ ("input") .blur (function(){ 
$ (this) .css ("background— color™, "#ffffff"); 
nD; 
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63 jQuery HTML 


63.1 读 写 内 容 与 属性 

jQuery 拥有 操作 HTML 元 素 和 属性 的 方法 。 操控 DOM 是 jQuery 的 重要 功能 。 
jQuery 提供 一 系列 与 DOM 相关 的 方法 ,这 使 访问 和 操作 元 素 和 属性 变 得 很 容易 。 

1. 读 取 内 容 

3 个 简单 实用 的 用 于 DOM 操作 的 jQuery 方法 如 下 所 示 。 

(1) text(): 设置 或 返回 所 选 元 素 的 文本 内 容 。 

(2) html(): 设置 或 返回 所 选 元 素 的 内 容 ( 包 括 HTML 标记 ) 。 


(3) val(): 设置 或 返回 表单 字段 的 值 。 
下 面 的 例子 说 明 如 何 通过 jQuery text() 和 html() 方 法 来 获得 内 容 。 


$ ("#btn1") .click(function (){ alert ("Text: "+$("#test") .text ()); }); 
$ ("#btn2") .click (function() { alert ("HIML: "+$("#test") .html ()); }); 


而 下 面 的 例子 演示 如 何 通过 jQuery val() 方法 获得 输入 字段 的 值 。 
$ ("#btnl") .click (function(){ alert (" 值 为 : "+$ ("#test") .val ()); }); 
2. 读 取 属性 


jQuery attr() 方法 用 于 获取 属性 值 。 下 面 的 例子 说 明 如 何 获 得 链接 中 href 属性 
的 值 。 


$ ("button") .click (function() { alert ($ ("#runoob") .attr ("href"™")); }); 


3. 设置 内 容 





使 用 读 取 3 个 相同 的 方法 来 设置 内 容 。 

(1) text(): 设置 或 返回 所 选 元 素 的 文本 内 容 。 

(2) html(): 设置 或 返回 所 选 元 素 的 内 容 ( 包 括 HTML 标记 ) 。 
(3) val(): 设置 或 返回 表单 字段 的 值 。 

下 面 的 例子 说 明 如 何 通过 text() .html() 及 val() 方 法 来 设置 内 容 。 


$ ("#btn1") .click (function(){ $("#test1") .text ("Hello world!");}); 
$ ("#btn2") .click (function(){ $("#test2") .html ("<b> Hello world!< /bp> "); }); 
$ ("#btn3") .click (function (){ $("#test3") .val ("RUNOOB"); }); 


4. 设置 属性 
jQuery attr() 方 法 也 用 于 设置 /改变 属性 值 。 下 面 的 例子 说 明 如 何 改变 ( 设 置 ) 链 接 
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中 href 属性 的 值 。 
$ ("button"). click (function () {$("# runoob").attr ("href","http://www. runoob. com/ 
jquery") ;1); 
attr() 方 法 也 允许 同时 设置 多 个 属性 。 下 面 的 例子 演示 如 何 同时 设置 href 和 title 
属性 。 





$ ("button") .click (function(){ 
$("#runoob") .attr ({ 
"href" : "http://www.runoob.com/jquery", 
"title" : "jQuery 教程 " 
Ds; 
D; 


632 添加 删除 元 素 
1. 添加 元 素 


使 用 jQuery 可 以 添加 新 元 素 。 添 加 新 元 素 的 方法 有 如 下 4 个 。 
Q@ append() : 在 被 选 元 素 内 结尾 插入 。 

@ prepend() : 在 被 选 元 素 内 开头 插入 。 

@ after() : 在 被 选 元 素 之 后 插入 。 

@ before() : 在 被 选 元 素 之 前 插入 。 

(1) append() 方 法 

append() 方 法 在 被 选 元 素 的 结尾 插入 新 元 素 , 如 例 6-3-2-1 所 示 。 
例 6-3-2-1 body 内 结尾 追加 新 内 容 。 

@ 源 文档 例 6-3-2-1. htm 内 容 。 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
*titlie></titley 
<script src= "scripts/jquery-1.4.1.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
function appendText () { 
var txtl="<p> Text.< /p> "; // 以 HTML 创 建新 元 素 
Var txt2=$ ("<p>< /p>") .text ("Text."); // 以 jQuery 创建 新 元 素 
Var txt3= document .createElement ("p"); 
txt3.innerHIM= "Text."; // 通 过 DOM 来 创建 文本 
$ ("body") .append (txt1，txt2，txt3，txt1，"Hel4 追 训话 冉 膏 one") ; 
} 
</script> 
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</head> 
<body> 
<p> This is a paragraph.</p> 
<button onclick= "appendText ()"> 追 加 文本 < /button> 
</body> 
</htm> 


@ 浏览 器 显示 结果 。 
浏览 器 显示 结果 如 图 6. 1 和 图 6.2 所 示 。 


专 ，@ localhost34734/ 源 程序 /至 iG/ 第 6 团 C | 3 三 
加 X 台 言 方 站 点 圆 最 党 访问 品 火狐 官方 站 点 » 中 移动 版 书签 
~ 





Thisi h. 
httpy/--1htm XX Is Is a paragrap 














过 四 locshost3 加 器 CG | 为 
局 XW 亡 方 站 点 加 最 和 访问 ” 口 移 动 设 备 上 的 世 答 


This is a paragraph. 
ER 


Hello everyone 





图 6.1 例 6-3-2-1 的 浏览 器 显示 结果 图 6.2 例 6-3-2-1 的 浏览 器 显示 结果 
(未 单 击 “追加 文本 ”按钮 ) ( 单 击 “追加 文本 ”按钮 后 ) 


@ 在 查看 器 中 查看 文档 结构 。 
在 查看 器 中 查看 文档 结构 如 图 6. 3 所 示 。 


查看 器 控制 台 调试 器 “样式 给 外 器 性 能 内存 网络 DOM 
十 








<!DOCTYPE htal PUBLIC“-//W3C//DTD XHTIL 1. 0 Transitional//EN” 
html xmlns="http://www wa. org/1999/xhtal”> 





pThis is a paragraph </p> 

<button onclick= appendText (> 追加 文本 C/buttony 
《Xp)Text-《/D> 

<pText. /p> 





图 6.3 例 6-3-2-1 的 浏览 器 中 的 查看 器 显示 ( 单 击 “ 追 加 文本 ”按钮 后 ) 
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(2) prepend() 方 法 

prepend() 方 法 在 被 选 元 素 的 开头 插入 元 素 .如 例 6-3-2-2 所 示 。 
例 6-3-2-2 body 内 开头 追加 新 元 素 。 

@ 源 文档 例 6-3-2-2. htm 文件 内 容 。 


< !DOCTYPE html> 
<html xmlns= "http://www-w3-orgV1999/xhtml"> 
<head> 
<title>< /title> 
<script src= "scripts/jquery-1.4.1.js" type= "text/javascript"> 
</script> 
<Script type= "text/javascript"> 
function appendText () { 
var txtl="<p> Text.< /p>"; // 以 HTML 创建 新 元 素 
Var txt2=$ ("<p>< /p> ") .text ("Text."); // 以 jQuery 创建 新 元 素 
Var txt3= document .createElement ("p"); 


txt3.innerHTMI= "Text."; // 通 过 DOM 来 创建 文本 
$ ("body") .prepend (txt1, txt2, txt3, txt1, "Hello", 
"everyone"); // 追 加 新 内 容 
} 
</script> 
< /head> 
<body> 


<p> This is a paragraph.< /p> 
<button onclick= "appendText ()"> 追 加 文本 < /button> 
< /body> 
</htm> 
@ 浏览 器 显示 结果 。 
未 单 击 “ 追 加 文本 ”按钮 时 ,显示 结果 与 图 6. 1 相同 。 单 击 * 追 加 文本 ”按钮 后 ,显示 
结果 如 图 6.4 所 示 。 
@ 在 查看 器 中 查看 文档 结构 。 
在 查看 器 中 查看 文档 结构 ,如 图 6. 5 所 示 。 
(3) after() 方 法 
前 面 使 用 append() 和 prepend() 方 法 添加 新 元 素 ,是 在 被 选 元 素 的 开头 和 结尾 插入 
内 容 。 而 且 ,append() 和 prepend() 方 法 能 够 通过 参数 接收 无 限 数 量 的 新 元 素 。after() 
方法 在 被 选 元 素 之 后 插入 元 素 ,如 例 6-3-2-3 所 示 。 
例 6-3-2-3 ”img 元 素 后 添加 新 元 素 。 
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十 
<《1DOCTYPE htal PUBLIC “-//W3C//DTD XHTML 1. 0 Transitional//EN"| 


tml xmlns= http://www wi. org/1999/xhtal”> 


Text. 





Text. 
Text. 
Text. 


Hello everyone 
pThis is a paragraph </p> 


This is a paragraph. batton onclick=“appendText 站 ”> 筷 加 文 水 </button> 




















追加 文本 
6.4 例 6-3-2-2 的 浏览 器 显示 结果 6.5 例 6-3-2-2 的 浏览 器 中 的 查看 器 显示 
( 单 击 “ 追 加 文本 ”按钮 后 ) ( 单 击 “ 追 加 文本 ”按钮 后 ) 


QO 源 文档 例 6-3-2-3. htm 文件 内 容 。 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>< /title> 
<script src="scripts/jquery- 1.4.1.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
function afterText () { 


var txt1l="<b>I< /b>"; // 以 HTML 创建 元 素 
var txt2=$ ("<i></i>") .text ("love "); // 通 过 jQuery 创建 元 素 
var txt3=document .createElement ("big"); // 通 过 DOM 创 建 元 素 
txt3.innerHTMI= "jQuery!"; 
$ ("img") .after (txt1, txt2, txt3); // 在 img 之 后 插入 新 元 素 
} 
</script> 
< /head> 
<body> 
<img src="/Img/eg w3school .gif" alt= "W3School Logo" /> 
<br/><br/> 
<button onclick= "afterText ()"> 在 图 片 后 面 添加 文本 < /button> 
< /body> 
</htm> 


@ 浏览 器 显示 结果 。 
浏览 器 显示 结果 如 图 6.6 和 图 6.7 所 示 。 
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和 过 | localhost34734/ 源 程序 /三 ， 转 品 C 
回 xW 官 方 站 点 图 最 党 访问 加 火狐 官方 站 点 





W3School Logo 








在 图 片 后 面 添加 文本 











6.6 例 6-3-2-3 的 浏览 器 显示 结果 (未 单 击 “ 在 图 片 后 插入 文本 ”按钮 
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| localhost3 加 中 Ci 2 三 
回 火 怠 言 方 站 点 图 最 党 访问 中 移动 设备 上 的 书签 


W3School Logo! /ove jQuery! 








在 图 片 后 面 添加 文本 











6.7 例 6-3-2-3 的 浏览 器 显示 结果 ( 单 击 “在 图 片 后 插入 文本 "按钮 后 ) 


@ 在 查看 器 中 查看 文档 结构 。 
在 查看 器 中 查看 文档 结构 ,如 图 6.8 所 示 。 


httpV/localhost34734/ 源 程序 X 
不 | 四 localhost34734/ 源 程序 / 理 # 园 跟 C ||Q as 人 <cmrk> | 家 | 由 及 会 了 
加 3 言 方 站 点 加 最 党 访问 器 火狐 官方 站 点 功 新 手 上 路 加 第 用 网 址 图 京东 商城 
W3School Logo 





» 中 移动 版 书签 








在 图 片 后 面 添加 文本 








时 | 查看 | 控制 台 油 坛 器 “样式 编 加 器 性 能 内存 网 络 DOM |B 二 后 六 四 日 日 
村 [ass | 


“DOCTIPE htal PUBLIC “//W3C//DID JETME 1.0 Transitional//EN” “http://m. wa ore/TR/zhtali/DI 
transitional. dtd” 

html xmlne="http://w. w3. org/1999/xhtel”> OD 

b head> ™) </head> 








b img src= /Imeg/eg wschool. gif” alt="W3School Logo”> 
hry 


br> 


《button onclick=“afterText() "> 在 图 片 后 面 深 加 文本 /button> ED 
/body> 


html > body 
规则 | 计算 后 “动画 ”字体 














6.8 ” 例 6-3-2-3 的 浏览 器 中 的 查看 器 显示 ( 单 击 “ 在 图 片 后 插入 文本 ”按钮 后 ) 
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2. 删除 元 素 


删除 元 素 一 般 使 用 以 下 两 个 jQuery 方法。 

。 remove(): 删除 被 选 元 素 ( 及 其 子 元 素 ) 。 

。 empty(): 从 被 选 元 素 中 删除 子 元 素 。 

(1) remove () 方 法 
remove() 方 法 删除 被 选 元 素 及 其 子 元 素 。 例 如 


$ ("#div1") .remove () 7 

(2) empty() 方 法 

empty() 方 法 删除 被 选 元 素 的 子 元 素 。 例 如 : 

$ ("#divi") .empty (); 

remove() 方 法 也 可 接受 一 个 参数 ,允许 对 被 删 元 素 进 行 过 滤 。 该 参数 可 以 是 任何 
jQuery 选择 器 的 语法 。 以 下 例子 删除 class= "italic" 的 所 有 一 p 二 元素 。 


$("p") .remove (".italic"); 


633 操纵 CSS 


1. 增删 CSS 类 


使 用 jQuery 可 以 很 容易 地 操作 CSS 元 素 。jQuery 拥有 如 下 3 种 操作 CSS 类 的 
方法 ， 

@ addClass() : 向 被 选 元 素 添 加 一 个 或 多 个 类 。 

@ removeClass() : 从 被 选 元 素 删除 一 个 或 多 个 类 。 

@ toggleClass() : 对 被 选 元 素 进行 添加 /删除 类 的 切换 操作 。 

类 的 实例 样式 表 如 下 : 


.important { font-weight : bold; font- size : xx- large; } 
.blue { color : blue; } 
(1) addClass() 方 法 
下 面 的 例子 展示 向 一 个 或 多 个 不 同 的 元 素 添 加 class 属性 。 
$ ("button") .click (function (){ 
$ ("hl,h2,p") .addclass ("blue"); 
$ ("div") .addclass ("important"); 
D; 


也 可 以 在 addClass() 方法 中 规定 多 个 类 。 


$ ("button") .click (function() { $ ("#divl") .agdclass ("important blue"); }); 
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(2) removeClass() 方 法 
下 面 的 例子 说 明 如 何在 不 同 的 元 素 中 删除 指定 的 class 属性 。 


$ ("button") .click (function() { $ ("hl, h2, p") .removeClass ("blue"); }); 


(3) toggleClass() 方 法 
下 面 的 例子 展示 如 何 使 用 toggleClass() 方法 。 该 方法 对 被 选 元 素 进 行 添加 /删除 类 
的 切换 操作 。 


$ ("button") .click (function (){ $("hl,h2,p") .toggleClass ("blue") ;}); 
2. 读 写 CSS 


读 写 CSS 使 用 同一 个 css() 方 法 。ess() 方 法 可 设置 或 返回 被 选 元 素 的 一 个 或 多 个 
样式 属性 。 

(1) 读 取 CSS 属性 

返回 指定 CSS 属性 的 值 的 语法 如 下 : 

css ("propertyname"); 

下 面 的 例子 将 返回 首 个 匹配 元 素 的 background-color 值 。 


$ ("Pp") .css ("background- color"); 


(2) 设置 CSS 属性 值 
设置 指定 CSS 属性 值 的 语法 如 下 : 


css ("propertyname", "value"); 

下 面 的 例子 将 为 所 有 匹配 元 素 设置 background-color 值 。 

$ ("p") .css ("background- color", "yellow") ; 

同时 设置 多 个 CSS 属性 值 的 语法 如 下 : 

css ({"propertyname": "value", "propertyname": "value", ...}); 

下 面 的 例子 将 为 所 有 匹配 元 素 设 置 background-color 和 font-size。 


$ ("p") .css ({"background- color":"yellow", "font— size":"200%"}); 


634 操纵 尺寸 


jQuery 提供 以 下 6 个 处 理 尺 寸 的 重要 方法 。 

@ width(): 设置 或 返回 元 素 的 宽度 (不 包括 内 边 距 ,边框 或 外 边 距 ) 。 
@ height() : 设置 或 返回 元 素 的 高 度 (不 包括 内 边 距 .边框 或 外 边 距 ) 。 
@ innerWidth(): 返回 元 素 的 宽度 (包括 内 边 距 )。 

@ innerHeight(): 返回 元 素 的 高 度 (包括 内 边 距 )。 

@ outerWidth(): 返回 元 素 的 宽度 (包括 内 边 距 和 边框 ) 。 
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@ outerHeight(): 返回 元 素 的 高 度 (包括 内 边 距 和 边框 )。 
例 6-3-4-1 说 明了 这 6 个 函数 的 功能 和 使 用 方法 。 


例 6-3-4-1 浏览 器 显示 1 个 div 和 1 个 按钮 。div 内 文本 为 div 自身 的 尺寸 信息 


按钮 功能 是 放大 div 的 宽 和 高 各 1 倍 。 单 击 按钮 1 次 ,放大 当前 尺寸 1 次 。 
@ 源 文档 例 6-3-4-1. htm 文件 内 容 。 


< !DOCTYPE html> 
<html xmlns= "http://www-w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
<script src= "scripts/jquery-1.4.1.js" type= "text/javascript"> 
</script> 
<Script type= "text/javascript"> 
function Size() { 
Var txt=""; 
txt+="div 的 宽度 是 : "+$ ("div") .width()+"< /br>"; 
txt+="div 的 高 度 是 : "+$ ("div") .height ()+"< /br>"; ; 
txt+="div 宽度 ,包含 内 边 距 : "+$ ("div") .innerWidth()+"< /br>"; 
txt+="div 高 度 , 包 含 内 边 距 : "+$ ("div") .innerHeight ()+ "< /br>"; 
txt+="div 宽度 ,包含 内 边 距 和 边框 : "+$ ("div") .outerWigth()+"< /br>"; 
txt+="div 高 度 , 包 含 内 边 距 和 边框 : "+$ ("div") .outerHeight (); 
$ ("div") .html (txt); 





} 

function Scale() { 
$ ("qiv") .width($ ("giv") -width() * 2); 
$ ("div") .height ($ ("div") .height () * 2); 
Size(); 

} 

$ (document) .ready (function () { 


Size(); 
$ ("div") .click (Scale); }); 
</script> 
</head> 
<body> 


<div style= "borgder:1px solid black; width:300px; height:150px; 
pagdding:20px; margin:10px;">< /div> 
<button onclick= "Scale ()"> 宽 和 高 各 放大 一 倍 < /button> 
< /body> 
</htm> 


@ 浏览 器 显示 结果 。 
浏览 器 显示 结果 分 别 如 图 6.9 和 图 6. 10 所 示 。 
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择 开始 ,并 沿 着 该 选择 移动 ,直到 找到 目标 元 素 为 止 。 


文档 树 实例 。 通 过 jQuery 遍历 ,能 够 从 被 选 ( 当 前 的 ) 元 素 
开始 ,在 家 族 树 中 向 上 移动 (祖先 ) ,向 下 移动 (子孙 ) ,水 平 
移动 (同胞 ) 。 这 种 移动 称 为 对 DOM 进行 遍历 。 


的 祖先 。 二 ul 二 元 素 是 过 li> 元 素 的 父 元 素 , 同 时 是 二 div 志 
的 子 元 素 。 左 边 的 二 1 之 元 素 是 过 span 之 的 父 元 素 以 及 图 6.11 一 个 家 族 树 示意 图 


httpV/local.. 例 6-3-4-1.htm XX 
所 | localhost34734/ 源 和 序 轩 跟 C | 2 三 
加 kW 官方 站 点 加 最 军 访 问 ?> 中 移动 设备 上 的 书签 








div 的 完 度 是 : 300 

div 的 高 度 是 : 150 

div 宽度 ， 包 含 内 边 距 : 340 

div 高 度 ， 包 含 内 边 距 : 190 

div 宽度 ， 包 含 内 边 距 和 边框 : 342 
div 高 度 ， 包 含 内 边 距 和 边框 : 192 























D localhost34734/ 面 入 序 /于 全/ 壬 5 轩辕 C | ESE-corir 会 | 自 多 » 至 
局 xE 方 站 点 辐 最 时 访问 四 火 名 言 方 站 点 莘 新 手 上 路 口 昭 用 网 址 国 京 S 商 外 ”站 收 动 届 生 上 的 书 答 





div 高 度 ， 包 含 内 边 距 : 340 
div 宽度 ， 包 合 内 边 距 和 边框 : 642 
div 高 度 ,包含 内 边 距 和 边框 : 342 











6.10 例 6-3-4-1 的 浏览 器 显示 结果 ( 单 击 * 宽 和 高 各 放大 一 们 ”按钮 1 次 ) 


64 列 历 
遍历 是 根据 元 素 相 对 于 其 他 元 素 的 关系 来 查找 "(或 选取 )HTML 元 素 。 以 某 项 先 


图 6. 11 展示 了 一 个 家 族 树 , 是 本 小 节 所 有 例子 所 用 的 


达 div 志 元素 是 二 ul 二 的 父 元 素 , 同 时 是 其 中 所 有 内 容 
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二 ul 之 的 子 元 素 , 同 时 是 二 div 之 的 后 代 。 二 span 记 元 素 是 过 li> 的 子 元 素 , 同 时 是 二 ul 二 
和 二 div 之 的 后 代 。 两 个 二 li 二 元 素 是 同胞 (拥有 相同 的 父 元 素 )。 右 边 的 二 li 二 元 素 是 
二 b 二 的 父 元 素 , 二 ul 二 的 子 元 素 , 同 时 是 二 div 这 的 后 代 。 二 b 过 元 素 是 右边 的 过 li> 的 子 
元 素 , 同 时 是 二 ul 之 和 二 div 过 的 后 代 。 祖 先是 父 `. 祖 父 . 曾 祖父 等 。 后 代 是 子 、 孙 、 曾 孙 
等 。 同 胞 拥有 相同 的 父 。 


1. 祖先 


祖先 是 父 .祖父 或 曾祖 父 等 。 通 过 祖先 ,向 上 遍历 DOM 树 ,以 查找 目标 元 素 。 用 于 
向 上 遍历 DOM 树 的 方法 如 下 : 

@ parent(): 返回 被 选 元 素 的 直接 父 元 素 。 

@ parents(): 返回 被 选 元 素 的 所 有 祖先 元 素 , 它 一 路 向 上 直到 文档 的 根 元 素 
(<html>)。 

@ parentsUntil(): 返回 介 于 两 个 给 定 元 素 之 间 的 所 有 祖先 元 素 。 

(1) parent() 方 法 

该 方法 只 会 向 上 一 级 对 DOM 树 进行 遍历 。 下 面 的 例子 返回 每 个 二 span 记 元 素 的 直 
接 父 元 素 。 

$ (document) .ready (function () { $ ("span") .parent (); }); 

(2) parents() 方 法 

下 面 的 例子 返回 所 有 < 二 span 之 元素 的 所 有 祖先 。 


$ (document) .ready (function (){ $ ("span") .parents (); }); 
也 可 以 使 用 可 选 参数 来 过 滤 对 祖先 元 素 的 搜索 。 下 面 的 例子 返回 所 有 二 span 志 元 
素 的 所 有 祖先 ,并 且 它 是 二 ul 二 元 素 。 


$ (document) .ready (function(){ $ ("span") .parents ("1"); }); 


(3) parentsUntil() 方 法 
下 面 的 例子 返回 介 于 二 span 记 与 过 div 记 元素 之 间 的 所 有 祖先 元 素 。 


$ (document) .ready (function () { $ ("span") .parentsUntil ("div"); }); 


2. 后 代 


后 代 是 子 、 孙 、 曾 孙 等 。 向 下 遍历 DOM 树 ,以 查找 元 素 的 后 代 ,方法 如 下 。 
OO children() : 返回 被 选 元 素 的 所 有 直接 子 元 素 。 

@ find(): 返回 被 选 元 素 的 后 代 元 素 ,一 路 向 下 直到 最 后 一 个 后 代 。 

(1) children() 方 法 

下 面 的 例子 返回 每 个 和 div 之 元 素 的 所 有 直接 子 元 素 。 


$ (document) .ready (function (){ $ ("div") .children(); }); 


也 可 以 使 用 可 选 参 数 来 过 滤 对 子 元 素 的 搜索 。 下 面 的 例子 返回 类 名 为 1” 的 所 有 
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去 p> 元 素 , 并 且 它们 是 过 div 之 的 直接 子 元 素 。 
$ (document) .ready (function() { $ ("div") .children ("p.1");}); 
(2) find() 方 法 
下 面 的 例子 返回 属于 二 div 之 后 代 的 所 有 所 span 盖 元 素 。 
$ (document) .ready (function () { $ ("div") -find("span")7 }); 
下 面 的 例子 返回 <div 之 的 所 有 后 代 。 


$ (document) .ready (function (){ $("div") .find("x "); }); 
3. 同胞 


同胞 拥有 相同 的 父 元 素 。 在 DOM 树 中 遍历 元 素 的 同胞 元 素 方法 如 下 : 
QD siblings(): 返回 被 选 元 素 的 所 有 同胞 元 素 。 

@ next(): 返回 被 选 元 素 的 下 一 个 同胞 元 素 。 

@ nextAll() : 返回 被 选 元 素 的 所 有 跟随 的 同胞 元 素 。 

@ nextUntil(): 返回 介 于 两 个 给 定 参数 之 间 的 所 有 跟随 的 同胞 元 素 。 
@) prev(): 返回 被 选 元 素 的 前 一 个 同胞 元 素 。 

@ prevAll() : 返回 被 选 元 素 的 所 有 前 面 的 同胞 元 素 。 

@ prevUntil(): 返回 介 于 两 个 给 定 参数 之 间 的 所 有 前 面 的 同胞 元 素 。 
(1) siblings() 方 法 

下 面 的 例子 返回 二 h2 之 的 所 有 同胞 元 素 。 


$ (document) .ready (function (){ $("h2") .siblings ()7 }); 


也 可 以 使 用 可 选 参 数 来 过 滤 对 同胞 元 素 的 搜索 。 下 面 的 例子 返回 属于 二 h2 二 的 同 
胞 元 素 的 所 有 二 p 二 元 素 。 


$ (document) .ready (function () { $ ("h2") .siblings ("p"); }); 


(2) next() 方 法 
该 方法 只 返回 一 个 元 素 。 下 面 的 例子 返回 二 h2 二 的 下 一 个 同胞 元 素 。 


$ (document) .ready (function (){ $("h2") .next (); }); 


(3) nextAll() 方 法 
下 面 的 例子 返回 二 h2 之 的 所 有 跟随 的 同胞 元 素 。 


$ (document) .ready (function () { $ ("h2") .nextAll (); }); 


(4) nextUntil() 方 法 
下 面 的 例子 返回 介 于 二 h2 写 与 二 h6 放 元素 之 间 的 所 有 同胞 元 素 。 


$ (document) .ready (function (){ $("h2") .nextUntil ("h6"); }); 
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(5) prev() .prevAll() 及 prevUntil() 方 法 
prev() .prevAll() 及 prevUntil() 方 法 的 工作 方式 与 上 面 的 方法 类 似 , 只 不 过 方向 相 
反 , 它 们 返回 的 是 前 面 的 同胞 元 素 。 


4. 过 滤 


缩小 搜索 元 素 的 范围 有 3 个 最 基本 的 过 滤 方 法 : first() ,last() 和 eq() ,它们 基于 其 
在 一 组 元 素 中 的 位 置 来 选择 一 个 特定 的 元 素 。 其 他 过 滤 方 法 ,比如 filter() 和 not() , 选 
取 匹 配 或 不 匹配 某 项 指定 标准 的 元 素 。 

(1) first() 方 法 

first() 方 法 返回 被 选 元 素 的 首 个 元 素 。 下 面 的 例子 选取 首 个 过 div 之 元 素 内 部 的 第 
一 个 <<p 二 元素。 

$ (document) .ready (function () { $ ("div p") .first (); }); 

(2) last() 方 法 

last() 方 法 返回 被 选 元 素 的 最 后 一 个 元 素 。 下 面 的 例子 选择 最 后 一 个 过 div 之 元 素 中 
的 最 后 一 个 一 p 过 元素 。 

$ (document) .ready (function () { $ ("div p") .last (); }); 

(3) eq() 方 法 

eq() 方 法 返回 被 选 元 素 中 带 有 指定 索引 号 的 元 素 。 索 引号 从 0 开始 ,因此 首 个 元 素 
的 索引 号 是 0 而 不 是 1。 下 面 的 例子 选取 第 二 个 二 p> 元 素 (索引 号 1) 。 

$ (document) .ready (function (){ $("p").eq(l1); }); 

(4) filter() 方 法 

filter() 方 法 允许 规定 一 个 标准 进行 筛选 。 不 匹配 这 个 标准 的 元 素 会 从 集合 中 删除 ， 
匹配 的 元 素 会 返回 。 下 面 的 例子 返回 带 有 类 名 “url" 的 所 有 二 p 志 元素 。 

$ (document) .ready (function (){ $("p") .filter(".url"); }); 

(5) not() 方 法 

not() 方 法 与 filter() 相 反 , 返 回 不 匹配 标准 的 所 有 元 素 。 下 面 的 例子 返回 不 带 有 类 
名 “url” 的 所 有 二 p 二 元 素 。 


$ (document) .ready (function (){ $("p") .not(".url"); }); 
65 Aax 


Ajax 是 与 服务 器 交换 数据 的 技术 , 它 在 不 重 载 全 部 页 面 的 情况 下 实现 对 部 分 网 页 的 
更 新 。Ajax, 即 异步 JavaScript 和 XML(Asynchronous JavaScript and XML) , 它 不 重 载 
整个 网 页 ,而 是 在 后 台 加 载 数据 ,并 在 网 页 上 显示 。 使 用 Ajax 的 应 用 程序 案例 有 谷歌 地 
图 腾讯 微 博 、 优 酷 视 频 、 人 人 网 等 。 
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使 用 jQuery Ajax 方法 ,能 够 使 用 HTTP GET 和 HTTP POST, 从 远程 服务 器 上 请 
求 文本 .HTML、XML 或 JSON, 能 同时 把 这 些 外 部 数据 直接 载 人 网 页 的 被 选 元 素 中 。 如 
果 没 有 jQuery, Ajax 编程 会 有 些 难 度 。 

编写 常规 的 Ajax 代码 并 不 容易 ,因为 不 同 的 浏览 器 对 Ajax 的 实现 并 不 相同 。 这 意 
味 着 必须 编写 额外 的 代码 对 浏览 器 进行 测试 。 不 过 ,jQuery 团队 解决 了 这 个 难题 ,只 需 
要 一 行 简 单 的 代码 ,就 可 以 实现 Ajax 功能 。 


1. load() 方 法 


load() 方 法 是 简单 但 强大 的 Ajax 方法 。 它 从 服务 器 加 载 数 据 , 并 把 返回 的 数据 放 和 人 
被 选 元 素 中 。 语 法 如 下 : 


$ (selector) .load (URL, data, callback); 


URL 是 必需 的 参数 ,规定 被 加 载 数据 的 URL。data 参数 可 选 ,规定 与 请 求 一 同 发 送 
的 查询 字符 串 键 / 值 对 集合 。callback 参数 可 选 , 是 load() 方 法 完成 后 所 执行 的 函数 
名 称 。 

例 6-5-1-1 把 文件 “demo_test. txt” 的 内 容 加 载 到 指定 的 二 div 二 元 素 。 

(1) 例 6-5-1-1-demo_test. txt 文件 

例 6-5-1-1-demo_test. txt 文件 内 容 如 下 。 


<h2> jQuery AJAX 是 个 非常 棒 的 功能 ! < /h2> 
<p id= "pl"> 这 是 段落 的 一 些 文本 。< /p> 


(2) 例 6-5-1-1. htm 文件 
例 6-5-1-1. htm 源 文 档 如 下 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.o0rg/1999/xhtml"> 
<head> 
<title>< /title> 
<script src= "scripts/jquery- 1.4.1.js" type= "text/javascript"> 
</script> 
<script> 
$ (document) .ready (function () { $ ("div") .load(" 例 6-5-1-1- demo 
test .txt"); }); 
</script> 
< /head> 
<body> 
<div></div> 
< /body> 
</htm> 


也 可 以 把 jQuery 选择 器 添加 到 URL 参数 。 下 面 的 例子 把 demo_test. txt 文件 中 
id 一 "p1" 的 元 素 的 内 容 加 载 到 指定 的 二 div 之 元 素 中 : 


FF 个 = jQuery _191 





$ ("#divi") .load(" 例 6- 5- 1- demo test.txt #p1"); 


可 选 的 callback 参数 规定 当 load() 方 法 完成 后 所 要 允许 的 回调 函数 。 回 调 函 数 可 以 
设置 不 同 的 参数 。 

O@ responseTxt: 包含 调用 成 功 时 的 结果 内 容 。 

@ statusTXT: 包含 调用 的 状态 。 

@ xhr: 包含 XMLHttpRequest 对 象 。 

例 6-5-1-2 在 例 6-5-1-1 的 基础 上 ,load() 方 法 完成 后 显示 一 个 提示 框 。 如 果 load() 
方法 已 成 功 , 则 显示 ”外 部 内 容 加 载 成 功 !” ,如果 失败 , 则 显示 错误 消息 。 

(1) 例 6-5-1-2. htm 文件 

源 文档 例 6-5-1-2. htm 文件 内 容 如 下 。 





< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
<script src="scripts/jquery-1.4.1.js" type= "text/javascript"> 
</script> 
<script> 
$ (document) .ready (function () { 
$ ("button") .click (function () { 
$ ("div") .load(" 例 6- 5-1-2- Gemo test.txt", function 
(responseTxt, statusTxt, xhr) { 
if (statusTxt=="success") 
alert ("外 部 内 容 加 载 成 功 !1"); 
if (statusTxt== "error") 


alert ("Error: "+Xhr.status+": "+xhr.statusText); 


Ds 
Ds; 
</script> 
< /head> 
<body> 
<button type="button" style="height:30px;width:150px;"> 从 服务 器 加 载 数 据 </ 
button> 
<div></div> 
< /body> 
</htm> 


(2) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 6. 12 和 图 6. 13 所 示 。 
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€ Olocalhost3: 加 跟 C | > 
回 火 台 官方 站 点 贺 最 党 访问 » 中 移动 版 书签 


|] localhost3: 辐 品 CI» 三 
加 火狐 官方 站 点 园 最 党 访问 ?> 口 移动 版 书签 





























从 服务 器 加 载 数据 
6. 12 未 单 击 “ 从 服务 器 加 载 数据 ” 图 6.13 单 击 “从 服务 器 加 载 数据 ” 
按钮 的 网 页 按钮 的 网 页 


2. $ . get() 方 法 
通过 HTTP GET 请 求 从 服务 器 上 请 求 数据 。 语 法 如 下 : 
$.get (URL, callback); 


URL 参数 : 必需 参数 ,规定 所 请 求 的 URL。 

callback 参数 : 可 选 参数 ,规定 请 求 成 功 后 所 执行 的 函数 名 。 

例 6-5-1-3 使 用 $. get() 方 法 从 ASP. NET 服务 器 上 的 一 个 文件 中 取 回 数据 。 单 
击 网 页 的 “从 服务 器 加 载 数据 ”按钮 , 则 执行 $. get() 方 法 ,从 指定 的 服务 器 文件 获取 文本 
数据 ,用 alert 函数 显示 响应 数据 。 

(1) 浏览 器 端 

例 6-5-1-3. htm 文件 为 浏览 器 端 源 文档 ,如 下 所 示 。 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<title></title> 
<script src= "scripts/jquery- 1.4.1.js" type= "text/javascript"> 
</script> 
<script> 
$ (document) .ready (function () { 
$ ("button") .click (function () { 
$.get (" 例 6-5-1-3.aspx", function (data, status) { 
alert ("数据 : "+ data+ "\n 状态 : "+ status); 
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<button type="button" style="height:30px;width:150px;"> 从 服务 器 加 载 数据 </ 
button> 
< /body> 
</htm> 
(2) 服务 器 端 
例 6-5-1-3. aspx 文件 为 服务 器 端 源 文件 ,内 容 如 下 。 
<%Q@ Page Language= "C#" RutoEventWireup= "true" CodeFile= " 例 6- 5-1- 3.aspx.cs" Inherits= 
"理论 第 6 章 jQuery 例 6 5 1 3" %> 
< $Response .Write ("hello, this is response from RSP.NET") ; g%> 
(3) 浏览 器 显示 
未 单 击 按钮 的 网 页 如 图 6. 12 所 示 ,而 单 击 按钮 的 网 页 如 图 6. 14 所 示 。 


httpi//localh...ry/ 例 6-5-3.htm xX 


| localhost34734j 国足 CC | QQ BE<Cvl+k> ?3 三 
辐 火 到 官方 站 点 贺 最 党 访问 加 火狐 官方 站 点 > 口 移动 设备 上 的 书签 


数据 :hello this is response from ASPJNET 
状态 : success 

















6.14 单 击 “从 服务 器 加 载 数据 "按钮 的 网 页 


3.$ . post() 方 法 
$. post() 方 法 通过 HTTP POST 请 求 从 服务 器 上 请 求 数据 。 语 法 如 下 : 


$.post (URL, data, callback); 


URL 参数 : 必需 参数 ,规定 所 请 求 的 URL。 

data 参数 : 可 选 参数 ,规定 连同 请 求 发 送 的 数据 。 

callback 参数 : 可 选 参数 ,规定 请 求 成 功 后 所 执行 的 函数 名 。 

例 6-5-1-4 使 用 $. post() 连 同 请 求 一 起 发 送 数据 到 ASP. NET 服务 器 。 单 击 网 页 
的 “从 服务 器 加 载 数据 ?按钮 , 则 执行 $. post() 方 法 ,向 指定 的 aspx 网 页 传送 数据 ,并 从 
指定 的 服务 器 文件 获取 文本 数据 ,用 alert 函数 显示 响应 数据 。 

(1) 浏览 器 端 

例 6-5-1-4. htm 文件 为 浏览 器 端 源 文档 ,如 下 所 示 。 





< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
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<title></title> 
<script src= "scripts/jquery-1.4.1.js" type= "text/javascript">< /script> 
<script> 
$ (document) .ready (function () { 
$ ("button") .click (function () { 
$.post (" 例 6- 5-1- 4.aspx", 
{ name: "Donald Duck", city: "Duckburg" }, 
function (data, status) { alert ("数据 : "+data+"\n 状态 : "+ 
status); }); 
D; 
D; 
</script> 
< /head> 
<body> 
< button type="button" style="height:30px;width:150px;"> 从 服务 器 加 载 数 据 </ 
button> 
< /body> 
</html> 


(2) 服务 器 端 
例 6-5-1-4. aspx 文件 为 服务 器 端 源 文件 ,内 容 如 下 。 


< %$Q Page Language= "C#" AutoEventWireup= "true" CodeFile= " 例 6- 5- 1- 4.aspx.cs" Inherits= 
"理论 第 6 章 jQuery 例 6 5 1 4" %> 
<%string fname, city; 
fname=Request .Form["name"]; 
city=Request.Form["city"]; 
Response.Write ("Dear "+ fnamet+ ". "); 
Response.Write ("Hope you live well in "+city+"."); 
多 > 


(3) 浏览 器 显示 
未 单 击 “ 从 服务 器 加 载 数据 ”按钮 的 网 页 如 图 6. 12 所 示 ,而 单 击 * 从 服务 器 加 载 数 


据 ” 按 钮 的 网 页 如 图 6. 15 所 示 。 


http://localhost34734 X 


过 | | localhost34734/ 源 程序 转 品 C|Q 起 革 
辐 火狐 官方 站 点 贺 最 党 访问 加 火狐 官方 站 点 忆 新 手 上 路 





数据 : hello, this is response from ASP.NET 
状态 : success 

















图 6.15 单 击 “ 从 服务 器 加 载 数 据 ” 按 钮 的 网 页 


sO: jQuery 


195 





66 实验 任务 


1. 实验 题目 
jQuery 脚本 程序 设计 。 
2. 程序 功能 


设计 一 个 画图 网 页 , 含 横向 水 平 主 菜单 、 纵 向 树 形 面板 和 客户 区 。 横 向 水 平 主 菜单 
含有 长 方形 `. 圆 、. 萎 形 正方形、 椭圆 5 个 菜单 项 。 纵 向 树 形 面板 含有 线 型 .颜色 动静 3 
个 选项 , 线 型 含有 实 线 .虚线 2 个 子 项 ,颜色 含有 红 、 绿 、 蓝 3 个 子 项 ,动静 含有 动 和 静 2 个 
子 选项 。 

单 击 长 方形 ,客户 区 显示 长 方形 。 单 击 正方 形 客户 区 ,显示 正方 形 。 单 击 线 型 ,当前 
图 形 线 型 改变 。 单 击 颜色 ,当前 图 形 的 边框 和 填充 颜色 同步 改变 。 单 击 动静 的 动 选项 ， 
当前 正方 形 水 平 匀 速 运动 ; 单 击 动静 的 静 选 项 ,如 果 当 前 正方 形 正在 运动 , 则 在 当前 位 置 
停 下 。 

按 下 B 键 ,当前 图 形 边框 设置 为 蓝 色 ; 按 下 R 键 ,当前 图 形 边框 设置 为 红色 。 


3. 实验 目的 


(1) 掌握 jQuery 事件 的 运用 方法 。 
(2) 掌握 jQuery 动态 添加 删除 HTML 元 素 的 方法 。 
(3) 掌握 运用 jQuery CSS 改变 元 素 样式 的 方法 。 


4. 实验 类 型 
综合 设计 。 
5. 实验 要 求 


(1) 脚本 程序 完全 运用 jQuery 程序 实现 。 

(2) 用 jQuery 添加 删除 元 素 , 显 示 客 户 区 图 形 。 

(3) 所 有 jQuery 事件 绑 定 脚本 程序 置 于 文档 就 绪 事件 中 。 
(4) 所 有 jQuery 脚本 程序 置 于 head 元 素 中 。 


6. 实验 环境 





(1) 计算 机 : PC 内 存 8GB、 主 频 1.8GHz 及 以 上 ,硬盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010。 

(4) 浏览 器 : IE9 及 以 上 、Chrome、Firefox、Safari、,Edge、QQ 浏览 器 等 。 
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7. 实验 原理 
事件 .CSS 添加 删除 元 素 直接 相关 的 jQuery 语句 ,并 辅 以 必要 的 说 明 与 分 析 。 
8. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 所 遇 到 的 全 部 错误 现象 描述 。 
(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 的 监视 变量 值 。 
9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 


图 知识 目标 

。 掌握 动画 机 制 的 实现 方法 

。 理解 JSON 的 本 质 

。 掌握 JSON 的 面向 对 象 知识 


图 能 力 目标 

根据 实际 需求 ,运用 JSON 进行 面向 对 象 的 程序 开发 
。 根据 实际 情况 恰当 运用 动画 机 制 

。 根据 要 求 熟练 应 用 jQuery 的 CSS 和 事件 处 理 
。 根据 实际 需求 恰当 选用 定位 方式 

图 素质 目标 

。 以 面向 对 象 的 视角 观察 、 分 析 、 设 计 程 序 

图 教学 重点 

。 运用 JSON 设计 面向 对 象 的 脚本 程序 

图 教学 难点 

。 识别 和 封装 对 象 

图 建议 学 时 

本 理论 : 内 学 时 

。 实验 : 2 学 时 


71 JSON 基 策 


JSON(JavaScript Object Notation ) 是 一 种 轻 量 级 的 数据 交换 格式 。 它 是 基于 
ECMAScript 的 一 个 子 集 ,采用 完全 独立 于 语言 的 文本 格式 ,沿用 类 似 C 语言 家 族 的 习 
惯 ( 包 括 CC++ 、C# 、Java、JavaScript、Perl、Python 等 ) 。 这 些 特性 使 JSON 成 为 理想 的 
数据 交换 语言 。 它 易于 人 阅读 和 编写 ,同时 也 易于 机 器 解析 和 生成 (一 般 用 于 提升 网 络 
传输 速率 ) 。 
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JSON 类 似 于 XML。 它 是 纯 文本 ,具有 “自我 描述 性 ”, 具 有 层级 结构 ( 值 中 存在 值 )， 
可 通过 JavaScript 进行 解析 ,JSON 格式 数据 可 使 用 Ajax 进行 传输 。 

JSON 与 XML 也 有 不 同 之 处 。 它 没有 结束 标签 ,更 简短 , 读 写 的 速度 更 快 ,使 用 内 
建 的 JavaScript eval() 方 法 进行 解析 ,使 用 数组 和 保留 字 。 

对 于 Ajax 应 用 程序 来 说 ,JSON 比 XML 更 快 、 更 易 使 用 。 使 用 XML 有 3 个 步 又， 
首先 读 取 XML 文档 ,而 后 使 用 XML DOM 来 循环 遍历 文档 ,最 后 读 取 值 并 存储 在 变量 
中 。 使 用 JSON 只 有 2 步 , 读 取 JSON 字符 串 和 用 eval() 处 理 JSON 字符 串 。 


7.1.1 语法 





JSON 语法 是 JavaScript 对 象 表 示 语 法 的 子 集 , 基 本 规则 如 下 。 
@ 数据 在 键 值 对 中 。 
@ 数据 由 逗号 分 隔 。 
@ 花 括号 保存 对 象 。 
@ 方 括号 保存 数组 。 


1. JSON 名 称 / 值 对 


JSON 数据 的 书写 格式 是 : 名 称 / 值 对 。 
名 称 / 值 对 组 合 中 的 名 称 写 在 前 面 (在 双 引 号 中 ) , 值 对 写 在 后 面 (同样 在 双 引 号 中 )， 
中 间 用 冒号 隔 开 ,例如 : 


"firstName":"John" 
等 价 于 JavaScript 语句 : 
firstName= "John" 


2. JSON 值 


JSON 值 有 如 下 5 种 。 

(1) 数字 (整数 或 浮 点 数 ) 。 
(2) 字符 串 ( 在 双 引号 中 ) 。 
(3) 逻辑 值 (true 或 false) 。 
(4) 数组 (在 方 括号 中 ) 。 
(5) 对 象 (在 花 括号 中 ) 。 
(6) null。 


3. 基础 结构 
JSON 结构 有 对 象 和 数组 2 种 基本 结构 。 通 过 这 两 种 结构 可 以 表示 各 种 复杂 的 
结构 。 


(1) 对 象 
对 象 在 JavaScript 中 表示 为 “{)” 括 起 来 的 内 容 , 数 据 结 构 为 {key: value，key: 


#@* JSON 





value, ,….} 的 键 值 对 的 结构 ,在 面向 对 象 的 语言 中 ,key 为 对 象 的 属性 , value 为 对 应 的 属 
性 值 ,所 以 很 容易 理解 。 取 值 方法 为 对 象 . key, 以 获取 属性 值 ,这 个 属性 值 的 类 型 可 以 是 
数字 字符 串 .数组 、 对 象 。 

(2) 数组 

数组 在 JavaScript 中 是 中 括号 “[]” 括 起 来 的 内 容 ,数据 结构 为 ["java", "javascript"， 
"vb",...], 取 值 方式 和 所 有 语言 中 一 样 ,使 用 索引 获取 ,字段 值 的 类 型 可 以 是 数字 、 字 符 
串 数组、 对 象 几 种 。 





7.12 示例 


JSON 可 以 将 JavaScript 对 象 中 表示 的 一 组 数据 转换 为 字符 串 ,然后 在 函数 之 间 传 
递 这 个 字符 串 ,或 者 在 异步 应 用 程序 中 将 字符 串 从 Web 客户 机 传递 给 服务 器 端 程序 。 
JavaScript 很 容易 解释 这 个 字符 串 ,而 且 JSON 可 以 表示 比 * 名 称 / 值 对 ”更 复杂 的 结构 。 
例如 ,可 以 表示 数组 和 复杂 的 对 象 , 而 不 仅仅 是 键 和 值 的 简单 列表 。 


1. 名 称 / 值 对 
按照 最 简单 的 形式 ,可 以 用 下 面 的 JSON 表示 “名 称 / 值 对 ”。 


{"firstName":"Brett"} 
这 个 示例 非常 基本 ,而 且 实 际 比 等 效 的 纯 文本 “名 称 / 值 对 ”占用 更 多 的 空间 。 
firstName=Brett 


但 当 多 个 “名 称 / 值 对 ” 串 在 一 起 时 ,JSON 就 体现 出 它 的 价值 了 。 首 先 , 可 以 创建 包 
含 多 个 “名 称 / 值 对 ”的 记录 ,比如 : 


{"firstName":"Brett", "lastName":"McLaughlin", "email":"aaaa"} 
从 语法 方面 来 看 ,这 与 “名 称 / 值 对 ” 相 比 并 没有 很 大 的 优势 ,但 在 有 些 情况 下 JSON 


更 容易 使 用 ,而 且 可 读 性 更 好 。 例 如 , 它 明确 地 表示 以 上 3 个 值 都 是 同一 记录 的 一 部 分 ; 
花 括 号 使 这 些 值 有 了 某 种 联系 。 


2. 数组 


当 表 示 一 组 值 时 ,JSON 不 但 能 够 提高 可 读 性 ,而 且 可 以 减少 复杂 性 。 假 设 表示 一 个 
人 名 列表 。 在 XML 中 ,需要 许多 开始 标记 和 结束 标记 。 如 果 使 用 典型 的 名 称 / 值 对 , 必 
须 建立 一 种 专 有 的 数据 格式 ,或 者 将 键 名 称 修改 为 personl-firstName 的 形式 。 

如 果 使 用 JSON, 只 需 将 多 个 带 花 括号 的 记录 分 组 在 一 起 。 





{ 
"people":[ 
{"firstName":"Brett", "lastName":"McLaughlin", "email":"aaaa"}, 
{"firstName":"Jason", "lastName":"Hunter", "email": "bbbb"}, 


{"firstName":"Elliotte", "lastName":"Harold", "email":"cccc"} 
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} 


在 这 个 示例 中 ,只 有 一 个 名 为 people 的 变量 , 值 是 包含 3 个 条 目的 数组 ,每 个 条 目 是 
一 个 人 的 记录 ,其 中 包含 名 、 姓 和 电子 邮件 地 址 。 上 面 的 示例 说 明 如 何 用 括号 将 记录 组 
合成 一 个 值 。 当 然 ,也 可 以 使 用 相同 的 语法 表示 多 个 值 (每 个 值 包含 多 个 记录 )。 


{ 
"programmers": [ 
{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, 
{ "firstName": "Elliotte", "lastName": "Harold", "email": "cccc" } 
], 
"authors": [ 
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, 
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, 
{ "firstName": "Frank", "lJastName": "Peretti", "genre": "christianfiction" } 
], 
"musicians": [ 
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, 
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": 


"piano" } 


} 


数组 能 够 表示 多 个 值 ,每 个 值 进而 包含 多 个 值 。 在 不 同 的 主 条 目 (programmers、 
authors 和 musicians) 之 间 , 记 录 中 实际 的 名 称 / 值 对 可 以 不 一 样 。JSON 是 完全 动态 的 ， 
允许 在 JSON 结构 的 中 间 改 变 表示 数据 的 方式 。 

处 理 JSON 格式 的 数据 时 ,没有 需要 遵守 的 预定 义 的 约束 。 所 以 ,在 同样 的 数据 结 
构 中 可 以 改变 表示 数据 的 方式 ,甚至 可 以 以 不 同方 式 表 示 同 一 事物 。 


713 格式 应 用 


掌握 了 JSON 格式 ,在 JavaScript 中 就 可 以 使 用 它 。JSON 是 JavaScript 的 原生 格 
式 , 这 意味 着 在 JavaScript 中 处 理 JSON 数据 不 需要 任何 特殊 的 API 或 工具 包 。 


1. 赋值 给 变 
例如 ,可 以 创建 一 个 新 的 JavaScript 变量 ,然后 将 JSON 格式 的 数据 直接 赋值 给 它 。 


Var people= { 
"programmers": [ 
{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, 


{ "firstName": "Elliotte", "JastName": "Harold", "email": "cccc" } 
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]， 
"authors": [ 
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, 
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, 
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christianfiction" } 
], 
"musicians": [ 
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, 
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } 


} 

people 变量 包含 前 面 的 JSON 格式 的 数据 ,进而 可 以 访问 和 修改 people 变量 。 

2. 访问 数据 

people 变量 用 点 号 表示 法 来 表示 其 中 不 同 的 数组 元 素 。 如 访问 programmers 列表 


的 第 一 个 条 目的 姓氏 ,只 需 在 JavaScript 中 使 用 下 面 的 代码 : 


people.programmers[0] .lastName; 


这 行 代码 首先 访问 people 变量 中 的 数据 ,然后 移动 到 称 为 programmers 的 条 目 ,再 


移动 到 第 一 个 记录 ([0]) ,最 后 访问 lastName 键 的 值 。 结 果 是 字符 串 值 McLaughlin。 


下 面 访问 people 变量 的 几 个 不 同 示例 。 


peocple.authors [1] .genre //Value is "fantasy" 

people.musicians [3] .lastName //Undefined. This refers to the fourth entry, and 
there isn't one 

people.programmers [2] .firstName //Value is "Elliotte" 


利用 这 样 的 语法 可 以 处 理 任何 JSON 格式 的 数据 ,而 不 需要 使 用 任何 额外 的 





JavaScript 工具 包 或 API。 


3. 修改 数据 
正如 可 以 用 点 号 和 方 括号 访问 数据 ,也 可 以 按照 同样 的 方式 轻松 地 修改 数据 。 


people.musicians [1] .lastName= "Rachmaninov"; 


如 果 要 处 理 大 量 JavaScript 对 象 ,JSON 是 一 个 好 选择 ,这 样 就 可 以 轻松 地 将 数据 转 


换 为 可 以 在 请 求 中 发 送 给 服务 器 端 程序 的 格式 。 


4. 嵌 套 格式 
许多 JavaScript 树 形 控件 使 用 JSON 嵌 套 格式 描述 树 形 结构 ,如 下 所 示 。 


{ 
"wid": "100000", 
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"text": "廊坊 银行 总 行 "， 
"children": [ 
{ 
"ig": "110000", 
"text": "廊坊 分 行 "， 
"children": [ 
{ "id": "113000"，"text": "廊坊 银行 开发 区 支行 " "leaf": true }， 
{ "id": "112000",，"text": "廊坊 银行 解放 道 支行 "， 
"children": [ 
{"id": "112200"，"text": "廊坊 银行 三 大 街 支 行 ", "leaf": true}, 
{"ig": "12100"，"text": "廊坊 银行 广 阳 道 支行 " "leaf": true } 
] 
] 
{ "id": "111000"，"text": "廊坊 银行 金光 道 支行 " "leaf": true } 


} 


7.14 对象 方 法 


JSON 对 象 不 但 可 以 刻画 属性 ,还 可 以 有 方法 。JSON 对 象 中 的 对 象 与 C++ .C# 和 
Java 程序 设计 语言 中 对 象 的 定义 不 同 , 它 是 直接 定义 对 象 ,不 能 通过 类 的 实例 化 方式 定 
义 。 而 且 ,JSON 方法 与 C++ .C# 和 Java 程序 设计 语言 中 方法 的 访问 控制 方式 不 同 , 不 
能 设置 其 访问 权限 ,没有 私有 和 受 保护 的 方法 ,是 全 公开 的 方法 。 


1. 方法 定义 
JSON 方法 也 是 名 / 值 对 形式 。 但 名 称 为 函数 名 , 值 为 一 个 具体 的 函数 ,如 下 所 示 。 


var Rectangle= { length: 50, width:50, position:{ left: 30, top:30}, 
Move : function(x,y){ 
Rectangle. position .left=x; 
Rectangle. position .top=y; 


} 


上 面 直接 定义 了 一 个 矩形 对 象 ,含有 长 、 宽 ,位 置 3 个 属性 和 1 个 移动 方法 。 而 且 位 
置 由 左 和 上 2 个 属性 刻画 。 
注意 ,名 / 值 对 中 的 名 可 以 不 用 双 引 号 括 起 来 (7. 1 节 的 名 亦 如 此 ), 值 必须 是 
function(){ } 的 形式 。 


2. 方法 引用 
方法 的 引用 由 点 号 连接 对 象 和 其 具体 方法 组 成 ,例如 : 








示 。 
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Rectangle .Move (100, 100); 


上 面 的 语句 表示 将 矩形 左上 角 移 动 到 (100, 100) 处 。 


72 上 机 实验 样 例 


1. 实验 目标 
掌握 综合 运用 JSON 和 jQuery 进行 面向 对 象 的 JavaScript 程序 设计 方法 。 
2. 程序 功能 


浏览 器 输出 一 个 矩形 ,周而复始 地 从 左 向 右 、. 从 右 向 左 水 平 运动 。 和 矩形 用 一 个 div 表 
和 矩形 的 运动 状态 用 对 象 来 刻画 。 


3, 实验 步骤 


(1) 源 程序 : 7-2. htm 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>< /title> 
<script src= "Scripts/jquery- 1.4.1.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
Var Rectangle= { 
Position: { X: 10, Y: 10 }, Step: 10, Direction: 1, 
Set: function () { 
$ ("#divi") .css ("left", Rectangle.Position.X+ "px"); 
$ ("#divi") .css ("top", Rectangle.Position.Y+ "px"); 
}, 
Move: function () { 
if (Rectangle.Position.X==510) Rectangle.Direction=-1; 
else if (Rectangle.Position.X==10) Rectangle.Direction=1; 
Rectangle.Position.X+=Rectangle.Direction * Rectangle.Step; 
Rectangle.Set (); 
}, 
Play: { 
Timer: null, 
Start: function () { 
Rectangle.set (); 
if (Rectangle.Play.Timer==null) 
Rectangle.Play.Timer= setInterval (Rectangle.Move, 
100); 
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}, 

End: function () { 
clearInterval (Rectangle.Play.Timer); Rectangle.Play.Timer= 
null; 


]7 
</script> 
</head> 
<body> 
<div> 
< input type= "button" onclick= "Rectangle.Play.Start ();" value=" 启 动 "/> 
< input type= "button" onclick= "Rectangle.Play.End();" value= "停止 "/> 
</div> 
<div id="divl" style="background- color:#bd92a3; position: absolute; width: 
250px; height:250px;">< /div> 
< script type= "text/javascript"> 
Rectangle.Play.Start (); 
</script> 
< /body> 
</htm> 


(2) 程序 分 析 

Rectangle 为 一 个 对 象 , 用 于 控制 一 个 div 元 素 的 水 平 运动 。 该 对 象 有 3 个 属性 .2 个 
方法 、1 个子 对 象 。 

Q@ 3 个 属性 。 

Rectangle. Position: 含有 2 个 分 量 , 即 X 和 YY, 存 储 和 矩形 左上 角 坐 标 。 

Rectangle. Step: 步 长 ,矩形 运动 一 次 的 水 平 增 量 。 

Rectangle. Direction: 运动 方向 , 取 值 有 1 和 一 1, 分 别 表示 从 左 向 右 和 从 右 向 左 
运动 。 

加 2 不 考 法 。 

Rectangle. Set() : 将 Rectangle. Position 的 分 量 X 和 YY 作为 div 元素 的 left 和 top 
属性 值 。 

Rectangle. Move() : 根据 Rectangle. Position 坐标 控制 div 元 素 运动 一 次 。 如 果 当 
前 矩形 对 象 水 平 坐标 为 510 ,将 运动 方向 设 为 从 右 向 左 , 即 1。 如 果 当 前 矩形 水 平 坐标 为 
10 ,将 运动 方向 设 为 从 左 向 右 , 即 一 1。 

@ 1 个 子 对 人 象 。 

Play 子 对 象 具 有 1 个 属性 和 2 个 方法 , 即 Rectangle. Play. Timer 属性 、Rectangle. 
Play. Start() 和 Rectangle. Play. End() 。 

Rectangle. Play. Timer: 存储 定时 器 ,初始 值 为 空 。 

Rectangle. Play. Start(): 首先 执行 Rectangle. Set()。 而 后 如 果 Rectangle. Play. 
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Timer 为 空 , 则 用 setInterval() 方 法 创建 定时 器 。setInterval() 的 定时 间隔 为 100ms, 所 
执行 的 方法 为 Rectangle. Move() 。 

(3) 现象 分 析 

如 果 去 掉 Rectangle. Play. Start ( ) 函数 内 的 语句 if (Rectangle. Play. Timer 二 二 
null) ,可 把 Rectangle. Play. Start() 变 成 : 


Start: function () { 
Rectangle.Set (); 
if (Rectangle.Play.Timer==null) Rectangle.Play.Timer= setInterval 
(Rectangle.Move, 100); 

$ 

@ 越 点 启动 速度 越 快 。 

未 单 击 停止 按钮 , 越 点 启动 按钮 ,矩形 运动 越 快 。 这 是 因为 去 掉 语 句 if(Rectangle. 
Play. Timer 二 二 nul) 后 ,每 点 一 次 启动 按钮 ,无 论 定 时 器 是 否 已 创建 ,都 执行 setInterval() 
方法 创建 定时 器 1 次 。 这 样 , 单 击 多 少 次 启动 按钮 ,就 会 有 多 少 个 定时 器 。 而 这 些 定时 
器 执行 同一 个 Rectangle. Move() 方 法 ,所 以 越 来 越 快 。 

@ 单 击 停止 按钮 无 效 。 

多 次 单 击 启动 按钮 后 ,无 论 怎么 单 击 停止 按钮 ,都 无 法 使 矩形 的 运动 停 下 来 。 这 是 
因为 去 掉 语句 if(Rectangle. Play. Timer 二 二 null) 后 ,每 单 击 一 次 启动 按钮 ,无 论 定时 器 
是 否 已 创建 ,都 执行 setInterval() 方 法 创建 定时 器 1 次 。 而 且 ,Rectangle. Play. Timer 属 
性 变量 只 存储 最 后 创建 的 定时 器 ,之 前 创建 的 定时 器 未 被 存储 ,因而 停 不 下 来 。 





73 实验 任务 


1. 实验 题目 
运用 JSON 进行 面向 对 象 动画 脚本 程序 设计 。 
2. 程序 功能 


设计 1 个 动画 网 页 ,至 少 含有 1 个 div 元 素 和 4 个 按钮 。 用 div 元素 展 现 正方 形 ， 
4 个 按钮 分 别 用 于 启动 ,停止 .1 倍速 和 2 倍速 按钮 。 

启动 网 页 ,正方 形 周期 性 地 匀速 从 左上 角 运 动 到 右 下 角 , 从 右 下 角 运 动 到 左上 角 。 
单 击 停止 按钮 , 则 运动 停止 。 单 击 启动 按钮 , 则 从 当前 位 置 按 预定 方向 运动 。 


3. 实验 目的 


(1) 掌握 运用 JSON 进行 面向 对 象 的 脚本 程序 开发 方法 。 
(2) 深化 动画 机 制 的 实现 。 


4. 实验 类 型 
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5. 实验 要 求 

(1) 脚本 程序 实现 完全 运用 jQuery 程序 实现 。 

(3) 完全 运用 JSON 进行 面向 对 象 的 程序 开发 。 

(2) 倍速 只 能 用 修改 步 长 的 方式 实现 ,不 能 用 修改 频率 的 方式 实现 。 


6. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB、 主 频 1.8GHz 及 以 上 、 硬 盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010。 

(4) 浏览 器 : IE9 及 以 上 、Chrome、Firefox、Safari、.Edge、QQ 浏览 器 等 。 


7. 实验 原理 
给 出 与 事件 .CSS 添加 删除 元 素 直接 相关 的 jQuery 语句 ,并 辅 以 必要 的 说 明 与 


8. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 所 遇 到 的 全 部 错误 现象 描述 。 
(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 监视 变量 值 。 


_ 


9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 


图 知识 目标 

。 理解 HTML5 的 新 特性 .优势 和 不 足 

。 掌握 HTML5 画布 和 SVG 绘图 技术 

。 掌握 HTML5 Web 存储 .SSE、Web Worker 和 Web 缓存 技术 
。 理解 Web Socket 的 通信 机 制 

图 能 力 目标 

。 根据 实际 需求 选用 恰当 的 HTML5 元 素 

。 根据 实际 情况 运用 画布 进行 绘图 

。 结合 HTML5 新 元 素 ,综合 运用 jQuery 事件 jQuery CSS、JSON 开发 Web 网 页 
图 素质 目标 

。 应 用 HTML5 开发 用 户 体 验 良 好 的 网 页 

图 教学 重点 

。 运用 JSON 封装 画布 绘图 功能 和 定时 器 实现 动画 功能 

图 教学 难点 

。 绘图 与 动画 算法 的 设计 与 实现 

图 建议 学 时 

ed 理论 : 6 学 时 

。 实验 : 6 学 时 


81 HTIML5 概 迷 


HTML5 草案 的 前 身 为 Web Applications 1. 0,2004 年 由 WHATWG 提出 ,2007 年 





被 W3C 接纳 ,并 成 立 了 新 的 HTML 工作 团队 。HTML5 的 第 一 份 正式 草案 已 于 2008 
年 1 月 22 日 公布 但 仍 处 于 完善 之 中 。 然 而 ,大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 
支持 特征 。2012 年 12 月 17 日, 万维网 联盟 (W3C) 宣 布 凝结 了 大 量 网 络 工 作者 心血 的 
HTML5 规范 已 经 正式 定稿 。W3C 称 HTML5 是 开放 的 Web 网 络 平台 的 黄 基 石 。 
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2013 年 5 月 6 日 ,HTML 5.1 正式 草案 公布 。 该 规范 定义 了 第 5 次 重大 版 本 ,第 1 
次 要 修订 万 维 网 的 核心 语言 : 超 文 本 标记 语言 (HTML)。 在 这 个 版 本 中 ,新 功能 不 断 推 
出 ,以 帮助 Web 应 用 程序 员 努 力 提高 新 元 素 互 操作 性 。 

支持 HTML5 的 浏览 器 包括 Firefox IE 9 及 其 更 高 版 本 .Chrome Safari、Opera 等 ， 
国内 的 傲游 浏览 器 (Maxthon) .基于 IE 或 Chromium(Chrome 的 工程 版 或 称 实验 版 ) 所 
推出 的 360 浏览 器 .搜狗 浏览 器 .QQ 浏览 器 .猎豹 浏览 器 等 国产 浏览 器 同样 具备 支持 
HTML5 的 能 力 。 

在 移动 设备 上 开发 HTML5 应 用 有 两 种 方法 : 使 用 HTML5 的 语法 和 使 用 
JavaScript 引擎 。JavaScript 引擎 的 构建 方法 让 制作 手机 网 页 游戏 成 为 可 能 。 由 于 界面 
层 很 复杂 ,可 选用 公开 的 功能 丰富 强大 的 UI 工具 包 开 发 界面 。 

HTML5 手机 应 用 的 最 大 优势 是 可 以 在 网 页 上 直接 调试 和 修改 。 原 先 应 用 开发 人 
员 可 能 需要 花费 大 力气 才能 达到 HTML5 的 同等 效果 ,而 且 不 断 地 重复 编码 .调试 和 运 
行 , 这 需要 改善 。 因 此 ,许多 手机 杂志 客户 端 基于 HTML 5 标准 ,开发 人 员 可 以 轻松 地 
调试 修改 。 

2014 年 10 月 29 日 ,万 维 网 联盟 宣布 ,经 过 近乎 8 年 的 艰辛 努力 ,HTML5 标准 规范 
终于 制定 完成 了 ,并 已 公开 发 布 。 

HTML5 将 取代 1999 年 制定 的 HTML 4.01.XHTML 1.0 标准 ,以 期 在 互联 网 应 用 
迅速 发 展 的 时 候 , 使 网 络 标准 符合 当代 的 网 络 需求 ,为 桌面 和 移动 平台 带 来 无 颖 衔接 的 
丰富 内 容 。 


1. 新 特性 


HTML 5 的 设计 目的 是 在 移动 设备 上 支持 多 媒体 。 新 语法 特征 被 引进 ,以 支持 设计 
目的 ,如 video .audio 和 canvas 标记 。HTML5 开发 的 新 功能 可 以 真正 改变 用 户 与 文档 
的 交互 方式 ,包括 : 

Q@ 新 元 素 : 用 于 绘画 的 canvas 元 素 ,用 于 媒介 回放 的 video 和 audio 元 素 .article、 
footer、header .nav、section 等 。 

@ 新 表单 控件 : 如 calendar、date.time、email、url、search。 

@ 离线 缓存 。 

@ 新 属性 。 

@ 完全 支持 CSS3 。 

@ 本 地 数据 。 

@ Web 应 用 : Web Socket、SSE、Web SQL 。 

@ 拖 放 功能 。 

@ 取消 过 时 的 HTML 4 标签。 


2. 应 用 革新 


(1) 带 来 一 个 无 缝 网 络 
HTML5 会 带 来 一 个 统一 的 网 络 ,无 论 是 笔记 本 ,台式 机 ,还 是 智能 手机 ,都 可 以 很 
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方便 地 浏览 基于 HTML5 的 网 站 。 因 此 ,设计 网 站 时 ,开发 者 需要 重新 考虑 用 户 体验 、 网 
站 浏览 、 网 站 结构 等 因素 ,使 网 站 在 任何 硬件 设备 上 都 通用 。 

(2) 变 成 企业 的 SAAS 平 台 

一 些 知 名 企业 ,如 微软 、Sales force、SAP Sybase 正在 开发 HTML5 的 开发 工具 。 如 
果 正 在 构建 企业 应 用 ,选择 HTML5 是 公司 部 署 SAAS 战略 的 首选 。 

(3) 变 得 很 移动 

目前 ,很 多 人 热衷 于 开发 独立 的 移动 应 用 ,但 HTML5 很 可 能 会 是 独立 移动 应 用 的 
终结 者 。 由 于 HTML5 将 应 用 的 功能 直接 加 入 其 内 核 ,因此 很 可 能 引导 移动 技术 潮流 重 
新 回 到 浏览 器 时 代 。HTML5 允许 开发 者 在 浏览 器 内 开发 应 用 ,所 以 制定 一 项 桌面 或 者 
移动 应 用 的 长 期 发 展 策略 的 设计 者 需要 考虑 这 一 点 。 


3. 优势 


(1) 网 络 标准 
HTML5 本 身 是 由 W3C 推荐 出 来 的 ,是 通过 谷歌 .苹果 、 诺基亚 、 中 国 移动 等 几 百 家 
公司 一 起 酝酿 开发 的 技术 ,最 大 的 好 处 在 于 公开 性 。 换 句 话 说 ,每 er 

以 根据 W3C 的 资料 库 找寻 根源 。 另 一 方面 ,W3C 通过 的 HTML5 标准 也 意味 着 每 一 
浏览 器 或 每 一 个 平台 都 会 去 实现 。 

(2) 多 设备 跨 平 台 

HTML5 的 优点 ,主要 在 于 可 以 进行 跨 平台 使 用 。 比 如 开发 了 一 款 HTML5 的 游 
戏 ,可 以 很 轻易 地 移植 到 UC 的 开放 平台 、Opera 的 游戏 中 心 .Facebook 的 应 用 平台 ， 
至 可 以 通过 封装 技术 发 放 到 App Store 或 Google Play 上 。 所 以 它 的 跨 平 台 性 非常 强 
大 ,这 也 是 大 多 数 人 对 HTML5 有 兴趣 的 主要 原因 。 

(3) 自 适 应 网 页 设计 

一 次 设计 ,普遍 适用 ,让 同一 张 网 页 自动 适应 不 同 大 小 的 屏幕 ,根据 屏幕 宽度 自动 调 
整 布局 (layout)。 这 解决 了 传统 网 页 的 困境 : 为 不 同 的 设备 提供 不 同 的 网 页 ,比如 专门 
提供 一 个 mobile 版 本 ,或 者 iPhone / iPad 版 本 ,导致 同时 维护 多 个 版 本 ,而 如 果 网 站 有 
多 个 portal( 入口 ), 则 会 极 大 增加 架构 设计 的 复杂 度 。 

(4) 即时 更 新 

C/S 结构 的 游戏 客户 端 每 次 都 要 更 新 ,成 本 较 高 。 而 更 新 HTML5 游戏 就 好 像 更 新 
页 面 一 样 ,是 即时 更 新 。 

综 上 所 述 ,HTML5 有 以 下 优点 。 

J@ 提高 可 用 性 和 改进 用 户 的 友好 体验 。 

@ 有 几 个 新 的 标签 ,有 助 于 开发 人 员 定 义 重 要 的 内 容 。 

@ 可 以 给 站 点 带 来 更 多 的 多 媒体 元 素 ( 视 频 和 音频 ) 。 

@ 可 以 很 好 地 替代 Flash 和 Silverlight。 

@ 涉及 网 站 的 抓 取 和 索引 时 ,对 SEO 很 友好 。 

@ 将 被 大 量 应 用 于 移动 应 用 程序 和 游戏 。 

@ 可 移植 性 好 。 
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HTML5 亦 有 不 足 。 首 先 ,该 标准 并 未 很 好 地 被 浏览 器 所 支持 。 其 次 , 因 新 标签 的 
引入 ,各 浏览 器 之 间 将 缺少 一 种 统一 的 数据 描述 格式 ,造成 用 户 体验 不 佳 。 
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一 个 含有 视频 .音频 的 简单 HTML 文档 如 下 。 
(1) 例 8-2-1-1. htm 源 文档 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.o0org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"/> 
<title></title> 
< /head> 
<body> 
<Video width= "320" height= "240" controls= "controls" autoplay= "autoplay" src=" 
AudioVideo/movie.mp4"> 
你 的 浏览 器 不 支持 video 标签 。 
</video> 
<audio src= "AudioVideo/ 周 杰 伦 - 双 节 棍 .mp3" controls="controls" /> 
< /body> 
</html> 


(2) VS2010 解决 方案 视图 
VS2010 解决 方案 视图 如 图 8. 1 所 示 。 








E 
b 国 第 3 章 -HTML 布 局 
》 ”多 第 4 章 -javascript 
> 入 第 5 章 -HTML DOM 
b 向 第 6 章 -jQuery 
4 七 第 8 章 -HTML5 

» 国 Audiovideo 

国 例 8-2-1.htm 





图 8.1 VS2010 解决 方案 视图 


(3) 浏览 器 显示 结果 

浏览 器 显示 结果 如 图 8. 2 所 示 。 

(4) 文档 解析 

二 1! doctype> 声明 必须 位 于 HTML5 文档 中 的 第 1 行 .用 html 表示 HTML5 版 
本 ,如 下 所 示 。 





http://localhost34734/ 源 程序 X 
气 | 中 localhost34734/ 源 程序/ 吾 i 转 品 C || QQ BE <CvlzK> 会 | 自 及 轨 
加 火狐 官方 站 点 加 最 党 访问 加 火狐 官方 站 点 七 新 手 上 路 加 党 用 网 址 四 京东 商城 » 中移动 版 书签 


~ 





图 8.2 浏览 器 显示 结果 


< !DOCTYPE html> 


对 于 中 文 网 页 ,需要 使 用 二 meta charset 二 "utf-8" 之 声明 编码 ,否则 会 出 现 乱 码 。 
文档 body 含有 2 个 HTML 新 元 素 ,依次 为 视频 元 素 和 音频 元 素 。 


821 canvas 


去 canvas 盖 标签 定义 图 形 比 ,如 图 . 表 、 文 字 和 其 他 图 像 等 。 它 只 是 图 形容 器 ,需要 使 
用 脚本 来 绘制 图 形 。 可 以 通过 多 种 脚本 方法 绘制 路 径 、 盒 、 圆 .字符 ,以 及 添加 图 像 等 。 
1. 浏览 器 支持 


支持 canvas 标签 的 各 浏览 器 最 低 版 本 依次 为 : Chrome 4. 0、IE 9. 0、Friefox 2.0、 
Safari 3. 1 .Opera 9. 0。 


2. 创建 一 个 画布 


默认 情况 下 ,二 canvas 元 素 没有 边框 和 内 容 。 如 果 让 所 canvas> 元 素 具 有 边框 ， 
需 设 置 style 的 boder 属性 。 
二 canvas 记 没有 边框 的 简单 实例 如 下 。 





< canvas id= "myCanvas" width= "200" height="100">< /canvas> 


标签 通常 需要 指定 一 个 id 属性, 以便 在 脚本 中 引用 ,width 和 height 属性 定义 画布 
的 宽 和 高 。 而 且 可 以 在 HTML 页 面 中 使 用 多 个 二 canvas 二 元 素 。 
使 用 style 属性 来 添加 边框 的 实例 如 下 。 








< canvas id= "myCanvas" width= "200" height= "100" style= "border:1px solid #000000;"> 


</canvas> 
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3. 使 用 JavaScript 绘制 图 像 


canvas 元 素 本 身 是 没有 绘图 能 力 的 。 所 有 的 绘制 工作 在 JavaScript 内 部 完成 ,如 
例 8-2-1-1 所 示 。 

例 8-2-1-1 画布 绘图 的 简单 示例 。 

(1) 例 8-2-1-1. htm 源 文档 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.o0rg/1999/zxhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"/> 
<title></title> 
<script src="../ 第 6 章 - jQuery/scripts/jquery- 1.4.1.min.js" type =" text/ 
javascript">< /script> 
< script type= "text/javascript"> 
$ (document) .ready (function () { 
var c= document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect (10, 10, 150, 75); 
} 
); 
</script> 
< /head> 
<body> 
<canvas id= "myCanvas" width="200" height="100" style="border: lpx dashed # 
000000;"> 
你 的 浏览 器 不 支持 canvas 标签 。 
</canvas> 
< /body> Te 下 
</VhtmlL> | | 
(2) 浏览 器 显示 结果 : : 


浏览 器 显示 结果 如 图 8. 3 所 示 。 Ul 
(3) 实例 解析 图 8.3 例 8-2-1-1 的 浏览 器 显示 结果 


首先 找到 二 canvas 志 元素 : 
Var C=document .getElementById ("myCanvas"); 
然后 创建 context 对 象 : 


Var ctx= c.getContext ("2d"); 


getContext("2d") 对 象 是 内 建 的 HTML5 对 象 , 拥 有 多 种 绘制 路 径 .矩形 、 圆 形 、 字 
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符 , 以 及 添加 图 像 的 方法 。 
最 后 ,以 下 两 行 代码 绘制 一 个 红色 的 矩形 : 
ctx.fillStyle="#FF0000"; 
ctx.fillRect (0,0,150,75); 
设置 fillStyle 属性 可 以 是 CSS 颜色 ,渐变 或 图 案 。fillStyle 默认 设置 是 #000000( 黑 


色 )。fillRect(x,y,width,height) 方法 定义 了 和 矩形 当前 的 填充 方式 。 


_ 


4. canvas 坐标 


canvas 是 一 个 二 维 网 格 , 左 上 角 坐 标 为 (0,0) ,画布 内 任何 元 素 坐 标 均 相 对 于 左上 
角 。 夯 布 二 维 坐 标 系 如 图 8.4 所 示 。 


(0, 0) 到 





7 





8.4 画布 二 维 坐标 系 


例 8-2-1-1 的 fillRect 方法 拥有 参数 (0,0,150,75) ,说 明 在 画布 上 左上 和 角 (0,0) 开 始 
绘制 150X75 的 和 矩形。 


5. 画 线 


在 canvas 上 夯 线 ,需要 使 用 以 下 2 种 方法 。 

@@ moveTo(x,y) 定义 线条 开始 坐标 。 

@ lineTo(x,y) 定义 线条 结束 坐标 。 

绘制 线条 用 到 ink 的 方法 ,就 像 stroke() ,如 例 8-2-1-2 所 示 。 

例 8-2-1-2 使 用 stroke() 方 法 ,在 坐标 (0.0) 和 坐标 (200,100) 之 间 画 一 条 直线 。 
JavaScript 内 部 程序 如 下 。 





Var C= document .getElementById ("myCanvas"); re ! 
Var ctx= c.getContext ("2d"); 
ctx.moveTo (0,0); 

ctx.lineTo (200, 100); 
ctx.stroke(); 


浏览 器 显示 结果 如 图 8. 5 所 示 。 图 8.5 例 8-2-1-2 的 浏览 器 显示 结果 
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6. 画 圆 


在 canvas 中 绘制 圆 形 ,方法 为 : arc(x,y,r, start, stop)。 

实际 上 ,在 绘制 圆 形 时 还 需 使 用 ink 的 方法 ,比如 stroke() 或 者 fill() 。 
例 8-2-1-3 ”使 用 arc() 方 法 绘制 一 个 圆 。 

JavaScript 内 部 程序 如 下 。 


Var c= document.getElementBYId ("myCanvas"); 
Var ctx= c.getContext ("2d"); 

ctx.beginPath (); 

ctx.arc(95, 50, 40, 0, 2* Math.PI); 


ctx.stroke(); 


浏览 器 显示 结果 如 图 8.6 所 示 。 
和 . 区 本 


使 用 canvas 绘制 文本 ,需要 的 重要 属性 和 方法 如 下 。 

@ font: 定义 字体 。 

@ fillText(Ctext,x,y): 在 canvas 上 绘制 实心 的 文本 。 

@ strokeText(text,x,y): 在 canvas 上 绘制 空心 的 文本 。 

(1) 使 用 fillText() 

例 8-2-1-4 使 用 Arial 字体 在 画布 上 绘制 一 个 高 30px 的 实心 文字 。 
Q@ JavaScript 内 部 程序 。 


8.6 例 8-2-1-3 的 浏览 器 显示 结果 


Var c= document .getElementById ("myCanvas"); 
Var ctx= c.getContext ("2d"); 

ctx.font= "30px Arial"; 

ctx.fillText ("Hello World", 10, 50); 

@ 浏览 器 显示 结果 。 

浏览 器 显示 结果 如 图 8.7 所 示 。 


Hello World 


8.7 实心 文字 














(2) 使 用 strokeText() 
例 8-2-1-5 使 用 Arial 字体 在 画布 上 绘制 一 个 高 30px 的 空心 文字 。 
OQ@ JavaScript 内 部 程序 。 


Var C=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
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ctx.font= "30px Rrial"7 
ctx.strokeText ("Hello World", 10, 50); 


加 浏览 器 显示 结果 。 Hello World 
浏览 器 显示 结果 如 图 8. 8 所 示 。 i 


8. 渐变 


渐变 可 以 填充 在 矩形 、 圆 形 、 线 条、 文本 中 ,各 种 形状 可 以 自己 定义 不 同 的 颜色 。 

有 以 下 两 种 不 同 的 方式 来 设置 Canvas 渐变 。 

@ createLinearGradient(x,y,xl,yl): 创建 线条 渐变 。 

@ createRadialGradient(x,y,r,xl,yl,rl): 创建 一 个 径 向 / 圆 渐 变 。 

使 用 渐变 对 象 ,必须 使 用 两 种 或 两 种 以 上 的 停止 颜色 。addColorStop( ) 方 法 指定 颜 
色 停 止 , 使 用 0 一 1 之 间 的 参数 值 来 描述 。 使 用 渐变 ,设置 fillStyle 或 strokeStyle 的 值 为 
渐变 对 象 ,然后 绘制 形状 ,如 矩形 文本 或 一 条 线 。 

(1) 使 用 createLinearGradient() 

例 8-2-1-6 创建 一 个 线性 渐变 ,用 其 填充 矩形 。 

@ JavaScript 内 部 程序 。 


Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 

var grd= ctx.createLinearGradient (0, 0, 200, 0); 
grd.addcolorstop (0, "red"); 

grd.addcolorstop (1, "white"); 
ctx.fillstyle=grd; 

ctx.fillRect (10, 10, 150, 80); 


@ 浏览 器 显示 结果 。 

浏览 器 显示 结果 如 图 8.9 所 示 。 

(2) 使 用 createRadialGradient() 

例 8-2-1-7 ”创建 一 个 径 向 / 圆 渐 变 , 用 其 填充 矩形 。 
Q@ JavaScript 内 部 程序 。 


Var c=document.getElementBYyId ("myCanvas"); 

Var ctx=c.getContext ("2d"); 

Var grd= ctx.createRadialGradient (75, 50, 5, 90, 60, 100); 
grd.addColorstop (0, "red"); 

grd.addColorstop (1, "white"); 

ctx.fillstyle=grd; 

ctx.fillRect (10,10, 150, 80); 


@ 浏览 器 显示 结果 。 
浏览 器 显示 结果 如 图 8. 10 所 示 。 


8.9 线性 渐变 


图 8.10 径 向 渐变 
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9. 图 像 


把 一 幅 图 像 放 置 到 画布 上 ,方法 为 : drawImage(image, x, y)。 
例 8-2-1-8 ”把 一 幅 图 像 放置 到 画布 上 。 
(1) 例 8-2-1-8. htm 源 文档 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"/> 
<title></title> 
< script src="../ 第 6 章 - jQuery/Scripts/jquery - 1.4.1.min.js" type = 
"text/javascript">< /script> 
</head> 
<body> 
< img id="scream" src="../images/img the scream.jpg" alt="The Scream" width=" 
220" height= "277"/> 
< canvas id= "myCanvas" width= "240" height= "297" style= "border:1px 
dashed #CCCCCC"> 
你 的 浏览 器 不 支持 canvas 标签 。 
</canvas> 
< script type= "text/javascript"> 
$ ("img") .hige (); 
Var c= document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
var img= document .getElementById ("scream"); 
ctx.drawImage (img, 10, 10); 
</script> 
< /body> 
</htm> 


(2) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 8. 11 所 示 。 





8.11 例 8-2-1-8 的 浏览 器 显示 结果 
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822 内 联 SVG 


SVG 指 可 伸缩 矢量 图 形 (Scalable Vector Graphics) ,遵从 万 维 网 联盟 的 标准 ,用 来 
定义 用 于 网 络 的 基于 矢量 的 图 形 ,使 用 XML 格式 定义 图 形 。 在 放大 或 改变 尺寸 的 情况 
下 ,SVG 图 像 不 失真 。 





1. SVG 优势 


与 其 他 图 像 格式 相 比 (如 JPEG 和 GIF) ,使 用 SVG 的 优势 如 下 。 
@ SVG 图 像 可 通过 文本 编辑 器 来 创建 和 修改 。 

@ SVG 图 像 可 被 搜索 .索引 、 脚 本 化 或 压缩 。 

@ SVG 图 像 可 伸缩 。 

@ SVG 图 像 可 在 任何 分 辩 率 下 被 高 质量 地 打印 。 

@ SVG 可 在 图 像 质量 不 下 降 的 情况 下 被 放大 。 


2. 浏览 器 支持 
IE 9 十 、Firefox、Opera、Google、Chrome 和 Safari 支持 内 联 SVG 。 
3. 把 SVG 直接 艇 入 HTML 页 面 


HTML5 能 将 SVG 元 素 直 接骨 入 HTML 页 面 中 ,如 例 8-2-2-1 所 示 。 
例 8-2-2-1 用 SVG 在 浏览 器 中 画 一 个 五 角 星 。 
(1) 例 8-2-2-1. htm 源 文档 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"/> 
<title></title> 
< /head> 
<body> 
<svg xmlns= "http://www.w3.org/2000/svg" version="]1.1" height= "190"> 
<polygon points= "100,10 40, 180 190, 60 10, 60 160, 180" 
style="fill:lime;stroke:purple;stroke- width:5;fill- 
rule:evenodd;"> 
</svg> 
< /body> 
</htm> 
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(2) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 8. 12 所 示 。 


4. SVG 与 canvas 的 区 别 


SVG 是 一 种 使 用 XML 描述 2D 图 形 的 语言 。 
canvas 通过 JavaScript 来 绘制 图 形 。SVG 基于 XML, 这 
意味 着 SVG DOM 中 的 每 个 元 素 都 是 可 用 的 ,可 以 为 某 
个 SVG 元 素 加 JavaScript 事件 处 理 器 。 在 SVG 中 ,每 个 
被 绘制 的 图 形 均 被 视 为 对 象 。 如 果 SVG 对 象 的 属性 发 
生变 化 ,那么 浏览 器 能 够 自动 重 现 图 形 。canvas 是 逐 像 
素 进行 演 染 的 。 在 canvas 中 ,一 旦 图 形 被 绘制 完成 ,就 不 


图 8.12 例 8-2-2-1 的 浏览 器 
显示 结果 


会 继续 得 到 浏览 器 的 关注 。 如 果 其 位 置 发 生变 化 ,那么 整个 场景 也 需要 重新 绘制 ,包括 
任何 或 许 已 被 图 形 覆 盖 的 对 象 。 表 8. 1 列 出 了 canvas 与 SVG 的 特点 比较 。 


表 8.1 canvas 与 SVG 的 特点 比较 











canvas SVG 
依赖 分 辨 率 不 依赖 分 辩 率 
不 支持 事件 处 理 器 支持 事件 处 理 器 
弱 的 文本 泻 染 能 力 最 适合 带 有 大 型 泻 染 区 域 的 应 用 程序 (如 谷歌 地 图 ) 





能 够 以 . png 或 . jpg 格式 保存 结 
果 图 像 


复杂 度 高 会 减 慢 浑 染 速 度 (任何 过 度 使 用 DOM 的 应 用 都 不 快 ) 





最 适合 图 像 密集 型 的 游戏 ,其 中 


的 许多 对 象 会 被 频繁 重 给 人 和 





823 Web 存储 


使 用 HTML5 可 以 在 本 地 存储 用 户 的 浏览 数据 。 HTML5 Web 存储 是 一 个 比 
cookie 更 好 的 本 地 存储 方式 。 先 前 版 本 的 HTML 本 地 存储 使 用 cookie。 但 是 HTML5 
Web 存储 需要 更 加 安全 与 快速 。 这 些 数据 不 会 被 保存 在 服务 器 上 ,但 是 这 些 数据 只 用 于 
用 户 请 求 网 站 数据 上 。 它 也 可 以 存储 大 量 的 数据 ,而 不 影响 网 站 的 性 能 。Web 存储 数据 





以 键 / 值 对 存在 ,Web 网 页 的 数据 只 允许 该 网 页 访问 使 用 。 
1. 浏览 器 支持 


IE 8 十 、Firefox、Opera、Chrome 和 Safari 支持 Web 存储 。 


2. localStorage 和 sessionStorage 


客户 端 存 储 数 据 的 两 个 对 象 如 下 。 
O@ localStorage: 没有 时 间 限 制 的 数据 存储 。 
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@ sessionStorage: 针对 一 个 session 的 数据 存储 。 
使 用 Web 存储 前 ,应 检查 浏览 器 是 否 支 持 localStorage 和 sessionStorage, 运 用 如 下 
语句 判断 。 
if (typeof (Storage) !== "undefined") 
. 
// 支 持 相关 的 一 些 代码 .…. 
} 
else 
{ 
// 抱 鞭 ! 不 支持 web 存 储 


3. localStorage 对 象 


localStorage 对 象 存 储 的 数据 没有 时 间 限 制 , 例 如 。 


localStorage.sitename= "HTML5 教程 "; 
document .getElementById ("result") .innerHTMI= "网 站 名 : "+ localSstorage.sitename; 


使 用 key 二 "sitename" 和 value 王 ”HTML5 教程 "可 以 创建 一 个 localStorage 键 / 值 
对 。 检 索 键 名 为 "sitename" 的 值 , 然 后 将 数据 插入 id 二 "result" 的 元 素 中 。 
移 除 localStorage 中 的 "sitename " 键 ,语句 如 下 : 


localSstorage.removeItem("lastname"); 


localStorage 和 sessionStorage 都 使 用 相同 的 API, 常 用 的 API 如 下 (以 localStorage 
为 例 ) 。 

@O 保存 数据 : localStorage. setItem(key,value) 。 

@ 读 取 数据 : localStorage. getItem(key) 。 

@ 删除 单个 数据 : localStorage. removeltem(key)。 

@ 删除 所 有 数据 : localStorage. clear()。 

@) 得 到 某 个 索引 的 key: localStorage. key(index)。 

键 / 值 对 通常 以 字符 串 存 储 , 可 根据 需要 转换 该 格式 ,如 例 8-2-3-1 所 示 。 

例 8-2-3-1 展示 了 用 户 单 击 按钮 的 次 数 。 

(1) 例 8-2-3-1. htm 源 文档 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content— Type" content= "text/html; charset=utf- 8"/> 
< script src="../ 第 6 章 - jQuery/Scripts/jquery - 1.4.1.min.js" type = 
"text/javascript">< /script> 
<title></title> 
<script> 
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function clickCounter() { 
if (typeof (Storage) !=="undefined") { 

if (localStorage.clickcount) { 
localStorage.clickcount=Number (localStorage . 
clickcount)+1; 

} 

else { 
localStorage.clickcount=1; 

} 

$("#result") .html (" 已 单 击 按钮 "+ localStorage.clickcount+ "次 "); 


} 
else { 
$("#result") .html (" 对 不 起 ,您 的 浏览 器 不 支持 web 存储 。"); 


} 

</script> 

< /head> 

<body> 
<p><button onclick= "clickcounter ()" type= "button"> 点 我 ! < /button> 
</p> 
<div id="result">< /div> 
<p> 单 击 该 按钮 查看 计数 器 的 增加 。< /p> 
<p> 关 闭 浏览 器 选项 卡 [或 窗口 ), 重 新 打开 此 页 面 ,计数 器 将 继续 计数 (不 是 重 置 )。 
</p> 

< /body> 

</htm> 


(2) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 8. 13 所 示 。 


httpy/localhost34734/ 源 程序 X 
€) © localhost34734/ 源 得 序 /更 加 器 c IQ EB <Ctr/+K> 个 | 自 及 
回 3 言 方 站 点 园 最 党 访问 器 火狐 官方 站 点 世 新 手 上 路 口 常用 网 址 四 京东 商城 » 站 移动 版 书签 
~ 








点 我 ! 


点 击 该 按钮 查看 计数 器 的 增加 。 
关闭 浏览 器 选项 卡 (或 窗口 ), 重 新 打开 此 页 面 ,计数 器 梅 继续 计数 (不 是 重 置 )。 














图 8.13 例 8-2-3-1 的 浏览 器 显示 结果 


4。 sessionStorage 对 象 
sessionStorage 方法 针对 一 个 session 进行 数据 存储 。 关 闭 浏览 器 窗口 后 ,数据 会 被 
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删除 。 
824 应 用 程序 缓存 


HTML5 引入 了 应 用 程序 缓存 ,这 意味 着 Web 应 用 可 进行 缓存 ,并 可 在 没有 因特网 
连接 时 访问 。 使 用 HTML5 应 用 程序 缓存 ,通过 创建 Cache Manifest 文件 可 以 创建 Web 
应 用 的 离线 版 本 。 应 用 程序 缓存 为 应 用 带 来 以 下 3 个 优势 。 

@ 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 它们 。 

@ 速度 : 已 缓存 资源 加 载 得 更 快 。 

@ 减少 服务 器 负载 : 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 

1. 浏览 器 支持 

IE 10.0 以 上 版 本 、Firefox、Chrome、Safari 和 Opera 支持 应 用 程序 缓存 。 

2. Cache Manifest 示例 


下 面 的 例子 展示 了 带 有 Cache Manifest 的 HTML 文档 ( 供 离线 浏览 ) 。 


< !DOCTYPE HTML> 
<html manifest= "demo.appcache"> 


<body> 
文档 内 容 .…… 
</body> 
</html> 


3. Cache Manifest 基础 


启用 应 用 程序 缓存 , 需 在 文档 的 二 html 二 标签 中 包含 manifest 属性 。 


< !DOCTYPE HTML> 
<html manifest= "demo .appcache"> 


</htm> 

每 个 指定 了 manifest 的 页 面 在 用 户 访问 时 都 会 被 缓存 。 如 果 未 指定 manifest 属性 ， 
则 页 面 不 会 被 缓存 (除非 在 manifest 文件 中 直接 指定 了 该 页 面 ) 。 

Manifest 文件 建议 的 文件 扩展 名 是 . appcache。 


Manifest 文件 需要 配置 正确 的 MIME-type, 即 text/cache-manifest。 必 须 在 Web 服 
务 器 上 进行 配置 。 





4. Manifest 文件 


Manifest 文件 是 简单 的 文本 文件 , 它 告知 浏览 器 被 缓存 的 内 容 ( 以 及 不 缓存 的 内 
容 ) 。Manifest 文件 可 分 为 以 下 3 个 部 分 。 
@@ Cache Manifest: 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 缓存 ,必须 有 标题 。 
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@ Network: 在 此 标题 下 列 出 的 文件 需要 与 服务 器 连接 , 且 不 会 被 缓存 。 

@ Fallback: 在 此 标题 下 列 出 的 文件 规定 页 面 无 法 访问 时 的 回 退 页 面 ( 如 404 
页 面 ) 。 

(1) Cache Manifest 

Cache Manifest 为 Manifest 的 第 1 行 ,是 必需 的 ,如 下 所 示 。 

Cache Manifest 

/theme .css 

/logo.gif 

/main.js 

上 面 的 manifest 文件 列 出 了 需要 缓存 的 文件 对 象 : 一 个 CSS 文件 .一 个 GIF 图 像 及 
一 个 JavaScript 文件 。 当 加 载 manifest 文件 后 ,浏览 器 会 从 网 站 的 根 目录 下 载 这 3 个 文 
件 。 然 后 ,无 论 用 户 何 时 与 因特网 断 开 连接 ,这 3 个 文件 依然 可 用 。 

Network 

(2) 下 面 的 Network 小 节 规 定 文件 login. php 不 被 缓存 ,离线 时 不 可 用 。 

Network: 


login.php 

可 以 使 用 星 号 来 指示 所 有 其 他 其 他 资源 /文件 都 需要 因特网 连接 。 

Network: 

(3) Fallback 

下 面 的 Fallback 小 节 规 定 如 果 无 法 建立 因特网 连接 , 则 用 offline. html 替代 /html5/ 
目录 中 的 所 有 文件 。 


Fallback: 
/html/ /offline.html 


5. 更 新 缓存 


一 旦 应 用 被 缓存 , 它 就 会 保持 缓存 ,直到 发 生 下 列 情况 。 
中 用 户 清空 浏览 器 缓存 。 

@ manifest 文件 被 修改 (参阅 提示 )。 

@ 由 程序 来 更 新 应 用 缓存 。 


6. 完整 的 Manifest 文件 





Cache Manifest 

提 2012- 02- 21 v1.0.0 
/theme .css 
/logo.gif 


/main.js 
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Network: 

login.php 

Fallback: 

/html/ /offline.html 


以 "# "开头 的 是 注释 行 ,但 也 可 满足 其 他 用 途 。 应 用 的 缓存 会 在 其 manifest 文件 更 
改 时 被 更 新 。 如 果 编 辑 了 一 幅 图 片 ,或 者 修改 了 一 个 JavaScript 函数 ,这 些 改变 都 不 会 被 
重新 缓存 。 更 新 注释 行 中 的 日 期 和 版 本 号 是 一 种 使 浏览 器 重新 缓存 文件 的 方法 。 

一 旦 文件 被 缓存 ,浏览 器 会 继续 展示 已 缓存 的 版 本 ,即使 修改 了 服务 器 上 的 文件 。 
为 了 确保 浏览 器 更 新 缓存 ,需要 更 新 manifest 文件 的 注释 行 日 期 等 。 


825 Web Workers 


当 在 HTML 页 面 中 执行 脚本 时 ,页 面 状 态 是 不 可 响应 的 ,直到 脚本 已 完成 。Web 
Worker 是 运行 在 后 台 的 JavaScript, 独立 于 其 他 脚本 ,不 会 影响 页 面 的 性 能 。 可 以 继续 
做 任何 愿意 做 的 事情 : 单 击 、 选 取 内 容 等 ,而 此 时 Web Worker 在 后 台 运 行 。 


1. 浏览 器 支持 
IE 10.0、Firefox、Chrome、Safari 和 Opera 都 支持 Web Workers。 
2. 一 个 Web Workers 实例 


例 8-2-5-1 页 面 显示 计数 值 ,用 一 个 简单 的 Web Worker 在 后 台 进 行 定 时 计数 。 
(1) 前 台 网 页 : 例 8-2-5-1. htm 源 文档 


< IDOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- TYpe" content= "text/html; charset=utf- 8"/> 
<title></title> 
< /head> 
<body> 
<p> 计 数 : <output id="result">< /output>< /p> 
<button onclick= "startWorker ()"> 开 始 工作 < /button> 
<button onclick= "stopWorker ()"> 停 止 工作 < /button> 
<p> 
<strong> 注 意 :</strong> 
Internet Explorer 9 及 更 早 下 版 本 浏览 器 不 支持 Web Workers. 
</p> 
<script> 
Var w=null; 
function startWorker() { 
if (typeof (Worker) !=="undefined") { 
if (w==nul1l1) { 
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Ww=new Worker (" 例 8- 2-5-1.js"); 
} 
WwW.onmessage= function (event) { 
document .getElementById ("result") .innerHIMI—= event .data; 
}; 
} 
else { 
document . getElementById ("result") .innerHTML=" 浏 览 器 不 支持 Web 
Workers."; 


} 

function stopWorker() { 
w.terminate ()7 
wnull; 

} 

</script> 
< /body> 
</htm> 


(2) 后 台 javaScript 程序 : 例 8-2-5-1. js 文件 代码 


var i=0; 
function timedCount () 
t 
i=i+1; 
postMessage (i); 
setTimeout ("timedCount ()", 500); 
} 
timedCount () 7 


(3) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 8. 14 所 示 。 


httpy/localhost34734/ 源 程序 X 
专 | 中 localhost34734/ 源 程序 / 弄 if 园 足 C || BE 谍 <Col+k> | 个 | 白 
辐 官方 站 点 图 最 第 访问 加 火狐 官方 站 点 全 新 手 上 路 加 常用 网 址 四 京东 商城 





计数 : 4 


注意 : Internet Explorer 9 及 更 早 IE 版 本 浏览 器 不 支持 Web Workers. 





图 8.14 例 8-2-5-1 的 浏览 器 显示 结果 
(4) 实例 解析 


加 检测 浏览 器 是 否 支 持 。 
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创建 Web Worker 之 前 ,运用 如 下 语句 检测 用 户 浏览 器 是 否 支持 它 。 


if (typeof (Worker) !=="undefined") 
{ 
// 是 的 ! Web Worker 支持 ! 
// 一 些 代 码 ….. 


// 抱 痰 ! Web Worker 不 支持 
} 


@ 创建 Web Worker 文件 。 
在 一 个 外 部 JavaScript 文件 ( 例 8-2-5-1.js) 中 创建 Web Worker 需要 执行 的 计数 脚 
本 程序 。 
var i=0; 
function timedCount () 
{ 
i=i+1; 
postMessage (i); 
setTimeout ("timedCount ()", 500); 
} 
timedCount (); 


以 上 代码 中 重要 的 部 分 是 postMessage() 方 法 , 它 用 于 向 HTML 页 面 传 回 一 段 
消息 。 
Web Worker 通常 不 用 于 如 此 简单 的 脚本 程序 ,而 是 用 于 更 耗费 CPU 资源 的 任务 。 
@ 创建 Web Worker 对 象 。 

有 了 Web Worker 文件 后 ,需要 从 HTML 页 面 调用 它 。 下 面 的 代码 检测 是 否 存 在 
Worker, 如 果 不 存 在 , 则 创建 一 个 新 的 Web Worker 对 象 ,然后 运行 例 8-2-5-1. js 中 的 
代码 。 


if (typeof (w)=="undefined") 
{ 
Ww= new Worker ("demo_ workers. je" 


1 


@ 发 送 和 接收 消息 。 

然后 可 从 Web Worker 发 送 和 接收 消息 。 此 时 需 向 Web Worker 添加 一 个 
onmessage 事件 监听 器 ,语句 如 下 : 

WwW.onmessage= function (event) { 


document .getElementById ("result") .innerHIMI~ event .data; 
ia 
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@ 终止 Web Worker。 

创建 Web Worker 对 象 后 , 它 会 继续 监听 消息 (即使 在 外 部 脚本 完成 之 后 ) ,直到 其 
被 终止 为 止 。 如 需 终 止 Web Worker, 并 释放 浏览 器 /计算 机 资源 , 则 使 用 terminate() 方 
法 ,如 下 所 示 : 


Ww.terminate (); 


826 服务 器 发 送 事 件 (Server-Sent Everts) 


HTML5 服务 器 发 送 事 件 (Werver-Went Event) 人 允许 网 页 获得 来 自 服务 器 的 更 新 。 
Server-Sent 事件 指 的 是 网 页 自动 获取 来 自 服务 器 的 更 新 。 以 前 也 可 能 做 到 这 一 点 ,方法 
是 网 页 不 得 不 询问 是 否 有 可 用 的 更 新 。 通 过 服务 器 发 送 事件 ,更 新 能 够 自动 到 达 。 服 务 
器 发 送 事件 用 于 Facebook/Twitter 更 新 、 估 价 更 新 、 新 的 博文 .赛事 结果 等 。 


1. 浏览 器 支持 

除了 Internet Explorer, 所 有 主流 浏览 器 均 支 持 服 务 器 发 送 事 件 。 
2. 接收 Server-Sent 事件 通知 

EventSource 对 象 用 于 接收 服务 器 发 送 事件 通知 ,例如 : 


Var source=new EventSource (" 例 8- 2- 6- 1.aspx"); 
source.onmessage= function (event) 
{ 
document .getElementById ("result") .innerHTIML+ =event .data+ "<br> "7 
}; 


创建 一 个 新 的 EventSource 对 象 , 规 定 发 送 更 新 页 面 的 URL("demo_sse. php")。 每 
接收 到 一 次 更 新 ,就 会 发 生 onmessage 事件 。 当 onmessage 事件 发 生 时 ,把 已 接收 的 数 
据 推 入 id 为 result 的 元 素 中 。 


3. 检测 Server-Sent 事件 支持 
以 下 程序 代码 用 来 检测 浏览 器 是 否 支 持 服务 器 发 送 事 件 。 


if (typeof (EventSource) !== "undefined") 
{ 
// 浏 览 器 支持 Server- Sent 
放 = 些 代码 > 
else 
' 
// 浏 览 器 不 支持 Server- Sent.. 
| 
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4. 一 个 完整 的 实例 


例 8-2-6-1 利用 HTML5 服务 器 事件 ,每 5 秒 刷新 一 次 网 页 时 间 。 
(1) 浏览 器 端 代 码 : 例 8-2-6-1. htm 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content— Type" content= "text/html; charset=utf- 8"/> 
<title></title> 
< /head> 
<body> 
<hl> 获 取 服 务 端 更 新 数据 < /hl> 
<div id="result">< /div> 
<script> 
if (typeof (EventSource) !=="undefined") { 
Var source=new EventSource (" 例 8- 2- 6- 1.aspx"); 
source.onmessage= function (event) { 
document .getElementById ("result") .innerHIML+ =event .data+ "<br> "7 
}; 
} 
else { 
document .getElementById ("result") .innerHTML= " 抱 圾 , 你 的 浏览 器 不 支持 
server- sent 事件 .…"; 
} 
</script> 
< /body> 
</htm> 


(2) 服务 器 端 代码 

为 了 例 8-2-6-1. htm 浏览 器 端 代码 可 以 运行 ,需要 服务 器 能 够 定时 发 送 数 据 更 新 。 
服务 器 端 事件 流 的 语法 要 求 把 Content-Type 报头 设置 为 text/event-stream。 例 8-2-6-1 
. aspx 完 整 的 ASPX 文件 内 容 如 下 。 

@ 例 8-2-6-1. aspx 源 文档 。 


< $Q Page Language= "C#" RutaEventWireup= "true" CodeFile= " 例 8- 2- 6- 1.aspx.cs" Inherits= 
"理论 第 8 章 HIML5 例 8 2 6 1" %> 
< sResponse.ContentType= "text/event- stream"; 

Response.Expires=—1; 

Response.Write ("data: "+DateTime.Now); 

Response.Flush(); 
名 > 
< !DOCTYPE html PUBLIC "~ //W3C//DID XHTML 1.0 Transitional//EN" 
"http://www.w3.orgVTRV/xhtml1/DTD/xhtml1-transitional.dtd"> 
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<html xmlns= "http://www.w3.0rg/1999/zxhtml"> 

<head runat= "server"><title></title>< /head> 

<body>< form id- "forml" runat= "server"><div></div>< /form> < /body> 
</html> 


首先 把 报头 Content-Type 设置 为 text/event-stream, 规 定 不 对 页 面 进行 缓 存 ,输出 


发 送 日 期 (始终 以 data: 开头 ,data 是 键 名 ,其 值 是 时 间 , 这 与 event. data 一 致 ) ,最 后 向 网 
页 刷新 输出 数据 。 


@ 例 8-2-6-1. aspx. cs 源 文档 。 


using System 
using System.Collections.Generic; 
using System.Linqg; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class 理论 第 8 章 HTML5 例 8 2 6 1 : System.Web.UI.Page 
{ 
protected void Page Load (object sender, EventArgs e) { } 
} 


(3) 浏览 器 显示 结果 
浏览 器 显示 结果 如 图 8. 15 所 示 。 


httpy/localhost34734 X 
过 四 localhost34734ii 转 品 Cc 
车 火狐 官方 站 点 图 最 常 访问 » 口 移动 版 书签 


获取 服务 端 更 新 数据 


2017/7/9 18:22:57; 





8.15 例 8-2-6-2 的 浏览 器 显示 结果 


S. EventSource 对 和 象 


例 8-2-6-2 使 用 onmessage 事件 获取 消息 。EventSource 对 象 还 有 其 他 事件 ,如 下 


所 示 。 


@ onopen: 当 通 往 服 务 器 的 连接 被 打开 。 
@ onerror: 当 发 生 错 误 。 
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827 WebSocket 


WebSocket 是 HTML5 开始 提供 的 一 种 在 单个 TCP 连接 上 进行 全 双 工 通信 的 协 
议 。 在 WebSocket API 中 ,浏览 器 和 服务 器 只 需 一 个 握手 动作 ,然后 浏览 器 和 服务 器 之 
间 就 形成 了 一 条 快速 通道 。 两 者 之 间 就 可 以 直接 进行 数据 互相 传送 。 

浏览 器 通过 JavaScript 向 服务 器 发 出 建立 WebSocket 连接 的 请 求 ,连接 建立 后 , 客 
户 端 和 服务 器 端 就 可 以 通过 TCP 连接 直接 交换 数据 。 当 程序 获取 到 Web Socket 连接 
后 ,就 可 以 通过 send() 方 法 向 服务 器 发 送 数 据 ,并 通过 onmessage 事件 接收 服务 器 返回 
的 数据 。 
用 于 创建 WebSocket 对 象 的 API 如 下 。 








Var Socket=new WebSocket (url, [protocol]); 
参数 说 明 如 下 。 

@O url: 指定 连接 的 URL。 

@ protocol: 可 选 的 ,指定 可 接受 的 子 协议 。 





1. WebSocket 属性 


WebSocket 对 象 属性 如 下 。 

Q@ readyState: 只 读 属性 ,表示 连接 状态 , 枚 举 值 0 表示 连接 尚未 建立 ,1 表示 连接 已 
建立 ,可 以 进行 通信 ,2 表示 连接 正在 进行 关闭 ,3 表示 连接 已 经 关闭 或 者 连接 不 能 打开 。 

@ bufferedAmount: 只 读 属性 ,已 被 send() 放 入 正在 队列 中 等 待 传输 但 还 没有 发 
出 的 UTF-8 文本 字 节 数 。 

2. WebSocket 事件 


WebSocket 相关 事件 如 表 8. 2 所 示 。 
表 8.2 WebSocket 相关 事件 














事 件 关联 方法 描 述 
open onopen 连接 建立 时 触发 
message onmessage 客户 端 接 收服 务 端 数据 时 触发 
error onerror 通信 发 生 错误 时 触发 
close onclose 连接 关闭 时 触发 








3. WebSocket 方法 


WebSocket 相关 方法 如 下 。 
Q@ send(): 使 用 连接 发 送 数 据 。 
@ close() : 关闭 连接 。 
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4. WebSocket 实例 


WebSocket 协议 本 质 上 是 一 个 基于 TCP 的 协议 。 为 建立 一 个 WebSocket 连接 , 客 
户 端 浏 览 器 首先 要 向 服务 器 发 起 一 个 HTTP 请 求 , 这 个 请 求 和 通常 的 HTTP 请 求 不 同 ， 
包含 了 一 些 附加 头 信息 ,其 中 附加 头 信息 Upgrade: WebSocket 表明 这 是 一 个 申请 协议 
升级 的 HTTP 请 求 。 服 务 器 端 解析 这 些 附 加 的 头 信 息 , 然 后 产生 应 答 信 息 返 回 给 客户 
端 ,客户 端 和 服务 器 端的 WebSocket 连接 就 建立 起 来 了 ,双方 就 可 以 通过 这 个 连接 通道 
自由 传递 信息 ,并 且 这 个 连接 会 持续 存在 ,直到 客户 端 或 者 服务 器 端的 某 一 方 主动 地 关 
闭 连接 。 

例 8-2-7-1 一 个 WebSocket 应 用 实例 。 

(1) 浏览 器 

目前 ,大 部 分 浏览 器 支持 WebSocket () 接口 ,可 以 在 Chrome、 Firefox、Opera 和 
Safari 浏览 器 中 浏览 例 8-2-7-1. htm , 源 文档 如 下 。 


< !DOCTYPE HTML> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"> 
<title> 菜 鸟 教程 (runoob.com)< /title> 
<script type= "text/javascript"> 
function WebSocketTest () 
{ 
if ("WebSocket" in window) 
{ 
alert ("您 的 浏览 器 支持 WebSocket!"); 
// 打 开 一 个 web socket 
Var Wws= new WebSocket ("ws://localhost:9998/echo"); 
Ws .onopen= function () 
{ 
//Web Socket 已 连接 上 ,使 用 send() 方 法 发 送 数据 
ws.send ("发 送 数 据 "); 
alert ("数据 发 送 中 .…"); 
]7 
ws.onmessage= function (evt) 
二 
Var received msg=evt .data; 
alert ("数据 已 接收 …"); 
]7 
ws .onclose= function () 
{ 
// 关 闭 websocket 
alert ("连接 已 关闭 .…"); 
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} 
else 
{ 
// 浏 览 器 不 支持 Websocket 
alert ("您 的 浏览 器 不 支持 Websocket!"); 


} 
</script> 
< /head> 
<body> 
<div id= "sse"> 
<a href="javascript :WebSocketTest ()"> 运 行 WebSocket< /a> 
</div> 
< /body> 
</html> 


(2) 配置 Apache 服务 器 
a 安装 pywebsocket。 
浏览 例 8-2-7-1. htm 前 ,需要 创建 一 个 支持 WebSocket 的 服务 。 访 问 如 下 网 址 : 
https://github.com/google/pywebsocket 
而 后 单 击 Clone or Download 按钮 进行 下 载 。 
@ 解压 下 载 的 文件 。 
@ 进入 pywebsocket 目录 。 
@ 执行 如 下 命令 。 
$python setup.py build 


$sudo python setup.py install 
$pydoc mod_pywebsocket 


@@ 开启 服务 。 
在 pywebsocket/mod_pywebsocket 目录 下 执行 以 下 命令 。 


$sudo python standalone.py-p 9998-w ../example/ 


以 上 命令 会 开启 一 个 端口 号 为 9998 的 服务 ,使 用 -w 来 设置 处 理 程序 echo_wsh. py 


所 在 的 目录 。 


83 上 机 实验 样 例 


1. 实验 目标 
综合 运用 定时 器 ,画布 和 Web 存储 进行 网 页 动画 程序 开发 。 
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2. 程序 功能 


运用 画布 ,在 浏览 器 内 输出 一 个 圆 ,周而复始 地 从 左 向 右 、 从 右 向 左 水 平 匀速 运动 。 
具体 要 求 如 下 。 

@ 圆 的 定时 运动 用 一 个 对 象 刻画 。 

@@ 默认 速度 为 频率 为 每 秒 运动 10 次 ,每 次 步 长 为 2px。 

@ 用 户 可 设 定 运动 速度 ,分 频率 和 步 长 2 个 方面 。 

@ 设置 的 参数 用 Web 存储 技术 记录 用 户 参 数 。 

@ 按 R 键 , 圆 的 填充 色 变 红 , 按 G 键 , 圆 的 填充 色 变 绿 。 

@ 当 圆 磁 到 画布 的 边框 时 ,改变 运动 方向 。 


3. 实验 步骤 


(1) 源 程序 : 8-3. htm 


< !DOCTYPE html> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="jquery-1.3.2.min.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
Var Ball={ 
xX: 0 Y: 10, R: 107 D: 1 Cxt? ml 
Initiation: function () { 
Ball .Cxt= document .getElementById ("can1") .getContext ("2d") ; 
Ball.Cxt .fillstyle= "#FF0000"; 
if (typeof (Storage) !=="undefined") { 
if (localstorage.Frequency) return; 
localStorage.Frequency=10; 
localStorage.Step=107 
} 
else { 
$( 虽 Prompt") .html ("对 不 起 ,您 的 浏览 器 不 支持 web 存储 。"); 


}, 
Change: { 
Color: function (event) { 
Switch (event.keyCode) { 
case 82: Ball .Cxt.fillstyle="#FF0000"; break; 
case 71: Ball .Cxt.fillSstyle= "#00FF00"; break; 
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Frequency: function () { 
localSstorage.Frequency=$ ("#Frequency") .val () 7 
if (Ball.Play.Timer !=null) { Ball.Play.Fnd(); Ball.Play.Start (); } 
}, 
Step: function () { localStorage.Step=$ ("#Step") .val (); } 
}, 
Render: function () { 
Ball.Cxt .beginPath (); 
Bal1.Cxt.arc(Bal1.X Ball.Y, Ball.R, 0, Math.PI * 2, true); 
Ball.Cxt .closePath (); 
Ball.Cxt.fill (); 
}, 
Move: function () { 
Ball.Cxt .clearRect (0, 0, 250, 250); 
Ball .X=Ball .XxX+ Number (localStorage.Step) * Ball.D; 
Ball .Render (); 
if (Ball.X<=Ball.R || Ball.X¥==250-Ball.R) Ball.D=Ball.D * (-1); 
}, 
Play: { 
Timer: null, 
Start: function () { 
if (Ball.Play.Timer==null) 
Ball.Play.Timer= setInterval (Ball .Move, 1000/Number 
(localSstorage.Frequency)); 
}, 
End: function () { clearInterval (Ball.Play.Timer); Ball. 
Play.Timer=null; } 


}; 
$ (document) .ready ( 
function () { 
$ ("body") .keydown (function (event) { Ball.Change.Color 
(event); }); 
Ball.Initiation(); 
Ball .Render (); 
Ball.Play.start (); 
$ ("#Frequency") .val (localStorage.Frequency); 
$ ("#Step") .val (localSstorage.Step); 
Ds; 
</script> 
< /head> 
<body> 
<p> 按 R 键 填充 色 为 红 , 按 G 键 填充 色 为 绿 < /p> 


<div> 





234 人 nanaxsaai 


<input type= 'button' id= "continue" value= "继续 " onclick= 'Ball. 
Play.Start ();'/> 
<input type= 'button' id=- "Stop" value= "停止 " onclick= 'Ball.Play. 
End();'/> 
<1label> 速 度 :< /label>< select id= "Frequency" onchange= "Ball. 
Change.Frequency () 7"> 
<option value= "10"> 10< /option> 
<option value= "20"> 20< /option> 
<option value= "40"> 40< /option> 
</select> 
<label> 次 / 秒 ,< /label> 
<label> 步 长 :< /label> 
< select id= "Step" onchange= "Bal1.Change.Step () 7"> 
<option value="10"> 10< /option> 
<option value= "5"> 5< /option> 
<option value="2"> 2< /option> 
</select> 
< label>px< /label> 
</div> 
<canvas id= "canl" width= "250" height= "250" style= "background- color:#bd92a3"> 
< /canvas> 
<div id="Prompt">< /div> 
< /body> 
</htm> 


(2) Ball 对 象 设计 
Ball 为 一 个 对 象 , 用 于 控制 一 个 画布 内 圆 的 水 平 匀速 运动 。 该 对 象 有 5 个 属性 .2 个 
方法 ,1 个子 对 象 。 

Q@ 5 个 属性 。 

。 Ball. X: 矩形 左上 角 横 坐标 。 

。 Ball. Y: 矩形 左上 角 纵 坐标 。 

。 Ball. D: 运动 方向 , 取 值 1 表示 从 左 向 右 , 取 值 一 1 表示 从 右 向 左 。 

。 Ball. R: 圆 的 半径 。 

。 Ball. Cxt: 绘图 环境 变量 。 

@ 3 个 方法 。 

。 Ball. Initiaition(): 初始 化 函数 ,设置 画布 绘图 环境 变量 、 运 动 频率 和 运动 步 长 。 

。 Ball. Move(): 根据 Ball. X、Ball. Y 、 当 前 运动 方向 以 及 步 长 .让 圆 动 一 步 ,更 新 当 
前 Ball. X 和 Ball. Y, 清 屏 , 调 用 Ball. Renbder() 画 圆 1 次 。 如 果 当 前 圆 对 象 水 平 
坐标 为 250- Ball. R, 将 运动 方向 设 为 从 右 向 左 , 即 1。 如 果 当 前 矩形 水 平 坐标 为 
Ball. R, 将 运动 方向 设 为 从 左 向 右 , 即 一 1。 

。 Ball. Renbder(): 根据 当前 Ball. X 和 Ball. Y 画 圆 1] 次 。 

2 个 子 对 象 。 
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。 Ball. Play 子 对 象 。 

Ball. Play 子 对 象 具 有 1 个 属性 和 2 个 方法 , 即 Ball. Play. Timer 属性 、Ball. Play. Start() 
和 Ball. Play. End() 。 

Ball. Play. Timer: 存储 定时 器 ,初始 值 为 空 。 

Ball. Play. Start() : 如 果 Ball. Play. Timer 为 空 , 则 用 setInterval() 方 法 创建 定时 器 。 
setInterval() 的 定时 间隔 为 (1000 / Number(localStorage. Frequency) 毫秒 ,所 执行 的 方 
法 为 Ball. Move()。 

。 Ball. Chang 子 对 象 。 

Ball. Chang 子 对 象 用 于 集成 3 个 方法 : Ball. Chang. Color()、Ball. Chang. Frequency() 
和 Ball. Chang. Step()。 这 3 个 方法 用 于 改变 颜色 ,改变 运动 频率 和 改变 运动 步 长 ,分别 
对 应 键盘 按 下 事件 ,id 为 Frequency 的 select 选择 改变 事件 ,id 为 Step 的 select 选择 改 
变 事件 的 处 理 函 数 。 

(3) 文档 就 绪 事件 处 理 

在 文档 就 绪 事 件 处 理 函 数 中 进行 body 键盘 按键 事件 绑 定 、.Ball 对 象 初始 化 、Ball 对 
象 直 接 画 圆 1 次 .启动 定时 器 .根据 Web 存储 初始 化 运动 频率 和 运动 速度 的 操作 。 

(4) 浏览 器 显示 结果 

浏览 器 显示 结果 如 图 8. 16 所 示 。 


拟 | localhost34734/ 源 程序/ 实 痊 / 园 躁 C 
加 x* 半 官方 站 点 加 最 党 访问 加 火狐 官方 站 点 » 口 移 动 版 书签 


按 R 键 填充 色 为 红 ， 按 G 键 填充 色 为 绿 
继续 | | 停止 | 速度 : [20 v| 次 / 秒 , ， 步 长 : |5_v|px 




















图 8.16 8.3 上 机 实验 的 浏览 器 显示 结果 


(5) 思考 题 

g@ 在 图 8. 16 的 状态 下 ,将 运动 速度 改 为 20 次 / 秒 , 步 长 设 为 10px, 小 球 运动 明显 加 
快 。 单 击 浏览 器 的 刷新 按钮 ,根据 什么 现象 说 明 Web 存储 已 经 起 作用 了 ? 

@ 在 上 一 步 的 基础 上 关闭 浏览 器 ,重新 用 同一 浏览 器 浏览 8-3. htm, 赁 什么 说 明 
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Web 存储 已 经 起 作用 了 ? 

@ 在 上 一 步 的 基础 上 重新 启动 计算 机 ,重新 用 同一 浏览 器 浏览 8-3. htm, 赁 什么 说 
明 Web 存储 已 经 起 作用 了 ? 

@ 将 运动 小 球 圆心 的 纵向 坐标 改 为 画布 的 纵向 中 心 点 :如何 更 改 ? 

名 如 何 将 界面 做 得 更 精致 美观 ? 


84 实验 任务 


1. 实验 题目 





运用 画布 .定时 器 ,jQuery 和 Web 存储 开发 面向 对 象 动画 脚本 程序 。 
2. 程序 功能 


在 实验 6. 5 的 基础 上 新 增 如 下 功能 。 

(1) 在 纵向 树 形 面板 上 新 增 速度 选项 ,内 含 运动 频率 和 运动 步 长 2 个 方面 ,并 编程 增 
加 圆 的 静 和 动 2 个 功能 。 当 在 树 形 面板 中 选中 动 , 主 菜单 中 选中 圆 , 则 圆 从 左上 和 角 和 运动 
到 右 下 角 , 碰 到 右 下 角 而 反 向 运动 到 左上 角 , 碰 到 左上 角 后 再 次 反 向 运动, 周而复始, 直 
到 静 按钮 被 按 下 。 

(2) 左 侧 树 形 面板 选择 全 部 用 Web 存储 记录 ,打开 网 页 后 用 Web 存储 初始 化 当前 
选项 。 


3. 实验 目的 


(1) 掌握 运用 JSON 进行 面向 对 象 程序 设计 的 方法 。 
(2) 深化 动画 实现 机 制 的 理解 。 

(3) 巩固 jQuery 事件 的 运用 方法 。 

(4) 巩固 jQuery CSS 改变 元 素 样式 的 方法 。 

(5) 掌握 画布 绘图 技术 。 

(6) 掌握 Web 存储 技术 的 应 用 。 


4. 实验 类 型 


综合 设计 。 





5. 实验 要 求 


(1) 脚本 程序 完全 运用 jQuery 程序 实现 。 

(2) 运用 JSON 进行 面向 对 象 的 应 用 程序 开发 。 

(3) 所 有 画图 全 部 用 画布 技术 实现 。 

(4) 左 侧 树 形 面板 的 选择 用 Web 存储 初始 化 和 记录 。 
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6. 实验 环境 


(1) 计算 机 : PC、 内 存 8GB., 主 频 1.8GHz 及 以 上 ,硬盘 500GB 及 以 上 。 
(2) 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
(3) 开发 环境 : Visual Studio 2010。 

(4) 浏览 器 : IE9 及 以 上 、Chrome,Firefox、Safari、.Edge、QQ 浏览 器 等 。 


7. 实验 原理 


给 出 与 事件 .CSS 添加 删除 元 素 直接 相关 的 jQuery 语句 ,并 辅 以 必要 的 说 明 与 
分 析 。 


8. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 所 遇 到 的 全 部 错误 现象 描述 。 
(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 监视 变量 值 。 


9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 


jQuery Mobile 


图 知识 目标 

。 掌握 手机 端 布局 技术 

。 掌握 界面 元 素 一 一 工具 栏 .导航 栏 按钮. 图标、 列表 的 应 用 
掌握 手机 端 事件 关联 及 其 处 理 技术 

。 掌握 IIS 服务 器 发 布 Web 网 站 相关 技术 

图 能 力 目标 

。 能 够 根据 实际 需求 进行 恰当 布局 

。 能 够 根据 实际 需求 选取 合适 的 界面 静态 元 素 和 界面 交互 机 制 
。 能 够 部 署 IIS Web 服务 器 

国 素质 目标 

。 快速 开发 体验 度 良 好 的 手机 端 网 页 

图 教学 重点 

。 jQuery Mobile 布局 技术 和 界面 交互 元 素 

教学 难点 

在 手机 屏幕 上 恰当 地 布局 

建议 学 时 

理论 : 4 学 时 

。 实验: 4 学 时 


91 基础 知 沈 


jQuery Mobile 是 一 个 为 触 控 优 化 的 框架 ,用 于 创建 移动 Web 应 用 程序 ,适用 于 所 有 
流行 的 智能 手机 和 平板 电脑 ,使 用 HTML5 和 CSS3 可 以 通过 尽 可 能 少 的 脚本 对 页 面 进 
行 布 局 。jQuery Mobile 构建 于 jQuery 库 之 上 ,这 使 得 已 掌握 jQuery 的 读者 更 易学 习 。 
它 使 用 HTML5 CSS3 .JavaScript 和 Ajax, 通 过 尽 可 能 少 的 代码 来 完成 页 面 的 布局 。 

jQuery Mobile 将 * 写 得 更 少 、 做 得 更 多 ”这 一 理念 提升 到 了 新 的 层次 : 它 会 自动 为 网 
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页 设计 交互 的 易 用 外 观 ,并 在 所 有 移动 设计 上 保持 一 致 。 这 样 不 需要 为 每 种 移动 设备 或 
OS 编写 一 个 应 用 程序 。 

@O Android 和 Blackberry 用 Java 编写 。 

@ iOS 用 Objective C 编写 。 

@@ Windows Phone 用 C# 和 . net 编写 。 

jQuery Mobile 解决 了 这 个 问题 ,因为 它 只 用 HTML、CSS 和 JavaScript, 这 些 技术 
是 所 有 移动 Web 浏览 器 的 标准 。 尽 管 jQuery Mobile 工作 于 所 有 移动 设备 ,但 也 可 能 在 
桌面 计算 机 上 存在 兼容 性 问题 。 


9.1.1 jQuery Mobile 安装 


在 网 站 上 使 用 jQuery Mobile 有 以 下 2 种 方法 。 

@ 从 CDN 引用 jQuery Mobile( 推 荐 ) 。 

@ 从 jQuerymobile. com 下 载 jQuery Mobile 库 。 

(1) 从 CDN 引用 jQuery Mobile 

CDN (Content Delivery Network) 用 于 通过 Web 来 分 发 常用 的 文件 ,以 此 加 快 下 载 
速度 。 与 jQuery 类 似 , 无 须 在 计算 机 上 安装 任何 程序 ,只 需 直 接 在 HTML 页 面 中 引用 
以 下 样式 表 和 JavaScript 库 。 


<head> 

<1link rel= "stylesheet" href= "http://code. jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2. 
min.css"> 

<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 

< script src="http://code. jquery. com/mobile/1. 3. 2/jquery. mobile- 1.3.2.min.js"></ 
script> 

< /head> 


(2) 下 载 jQuery Mobile 到 Web 应 用 服务 器 


可 以 从 jQuerymobile. com 下 载 文件 ,而 后 在 服务 器 上 存放 jQuery Mobile, 如 下 
所 示 。 


<head> 

<1link rel= stylesheet href=jquery.mobile-1.3.2.css> 
<script src=jquery.js></script> 

<script src=jquery.mobile-1.3.2.j]s></script> 

< /head> 


说 明 : 将 下 载 的 文件 放 到 目标 文件 夹 中 ,需要 先 创 建文 件 来。 二 script> 标签 中 没 
有 type 二 "text/javascript" 属性 ,因为 在 HTML5 中 ,该 属性 不 是 必需 的 。JavaScript 是 
HTML5 以 及 所 有 现代 浏览 器 中 的 默认 脚本 语言 。 


912 jQuery Mobile 页 面 
尽管 jQuery Mobile 适用 于 所 有 移动 设备 , 它 在 台式 计算 机 上 仍然 可 能 存在 兼容 性 
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问题 (由 于 有 限 的 CSS3 支持 ) 。 
例 9-1-2-1 一 个 简单 的 jQuery Mobile 页 面 。 
(1) 例 9-1-2-1. htm 源 文 档 


< !DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page"> 
<div data- role= "header"> 
<h1l> 欢 迎 访问 我 的 主页 < /h1> 
</div> 
<div data- role= "content"> 
<p> 现 在 我 已 经 成 为 一 名 移动 开发 者 ! < /p> 
</div> 
<div data- role= "footer"><hl> 页 脚 文本 < /hl>< /div> 
</div> 
< /body> 
</html> 


(2) Android 平台 小 米 手 机 浏览 器 显示 结 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 1 所 示 。 


欢迎 访问 我 的 主页 





欢迎 访问 我 的 主页 


现在 我 已 经 成 为 一 名 移动 开发 者 ! 


页 脚 文本 








图 9.1 例 9-1-2-1 的 Android 平台 小 米 手 机 浏览 器 显示 结果 
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(3) 程序 解析 

Q@ data-role 二 "page" 是 显示 在 浏览 器 中 的 页 面 。 

@ data-role 二 "header" 创建 页 面 上 方 的 工具 栏 (常用 于 标题 和 搜索 按钮 ) 。 

@ data-role 二 "content" 定义 页 面 的 内 容 , 比 如 文本 、 图 像 、 表 单 和 按钮 等 。 

图 data-role 二 "footer" 创建 页 面 底部 的 工具 栏 。 

HTML5 的 data- * 属性 用 于 通过 jQuery Mobile 为 移动 设备 创建 “对 触 控 友好 的 ” 
交互 外 观 。 在 以 上 4 类 容器 中 ,可 以 添加 任意 HTML 元 素 ,如 段落 图像. 标题 .列表 等 。 


1. 在 jQuery Mobile 中 添加 页 面 


用 jQuery Mobile 可 以 在 单一 HTML 文件 中 创建 多 个 页 面 , 通 过 唯一 的 id 分 隔 每 
张 页 面 ,并 使 用 href 属性 连接 彼此 ,如 例 9-1-2-2 所 示 。 

例 9-1-2-2 jQuery Mobile 多 网 页 的 简单 实例 。 

(1) 例 9-1-2-2. htm 源 文档 


< !DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
=1:3.2.min.6s3"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 欢 迎 访 问 我 的 主页 < /hl>< /div> 
<div data- role= "content"><p>Welcome!< /p><a href="#pagetwo"> 转 到 页 面 二 </ 
a></div> 
<div data- role= "footer"><h1l> 页 脚 文 本 < /hl>< /div> 
</div> 


<div data- role= "page" id= "pagetwo"> 
<div data- role= "header"><hl> 欢 迎 访问 我 的 主页 </hl>< /div> 
<div data- role= "content"><p>Goodbye!< /p><a href="#pageone"> 转 到 页 面 一 </ 
a></div> 
<div data- role= "footer"><hl> 页 脚 文 本 < /hl> 
</div> 

</div> 

< /body> 
</htm> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 2 所 示 。 





欢迎 访问 我 的 主页 Q 


欢迎 访问 我 的 主页 





Welcomel 


转 到 页 面 二 


页 脚 文本 











图 9.2 例 9-1-2-2 的 Android 平台 小 米 手 机 浏览 器 显示 结果 


(3) 提示 
包含 大 量 内 容 的 Web 应 用 程序 会 影响 加 载 时 间 。 如 不 希望 在 内 部 链接 页 面 , 可 使 
用 如 下 语句 引用 外 部 文件 。 


<a href= "externalfile.html"> 转 到 外 部 页 面 </a> 
2. 将 页 面 用 做 对 话 框 


对 话 框 是 用 来 显示 信息 或 请 求 输入 的 视窗 类 型 。 需 在 用 户 单 击 ( 轻 触 ) 链 接 时 创建 
一 个 对 话 框 ,向 该 链接 添加 data-rel 王 "dialog" ,如 例 9-1-2-3 所 示 。 

例 9-1-2-3 一 个 简单 的 页 面 对 话 框 实例 。 

(1) 例 9-1-2-3. htm 源 文档 


< IDOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
= L320 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js"></script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 欢 迎 访问 我 的 主页 < /hl>< /div> 
<div data- role= "content"> 
<p> 欢 迎 ! < /p> 
<a href="#pagetwo" data- rel= "dialog"> 转 到 页 面 二 < /a> 
</div> 
<div data- role= "footer"><hl> 页 脚 文 本 < /hl>< /div> 
</div> 





<div data- role= "page" id= "pagetwo"> 
<div data- role= "header"><hl> 我 是 一 个 对 话 框 ! < /hl>< /div> 
<div data- role= "content"> 
<p> 对 话 框 显示 在 当前 页 面 的 顶端 ,不 横 跨 整个 页 面 宽 度 。 对 话 框 页 眉 中 的 图 
标 "x" 可 关闭 对 话 框 。< /p> 
<a href="#pageone"> 转 到 页 面 一 < /a> 
</div> 
<div data- role= "footer"><h1l> 页 脚 文 本 < /hl>< /div> 
</div> 
< /body> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 

Android 平台 小 米 手 机 浏览 器 显示 结果 如 图 9.3 和 图 9.4 所 示 。 图 9.3 和 图 9.4 分 
别 为 未 单 击 “ 转 到 页 面 二 ”链接 和 单 击 “ 转 到 页 面 二 ”链接 后 的 界面 。 单 击 图 9. 4 对 话 框 
的 页 眉 左 侧 图 标 按钮 ,关闭 对 话 框 , 退 到 图 9. 3 的 状态 。 


欢迎 访问 我 的 主页 Q 


欢迎 访问 我 的 主页 





图 9.3 例 9-1-2-3 的 Android 平台 小 米 手机 浏览 器 显示 结果 (未 单 击 “ 转 到 页 面 二 "链接 ) 


EL 


对 话 框 显 示 在 当前 页 面 的 顶端 ， 不 模 跨 整个 页 面 宽 度 。 对 话 框 页 居 
中 的 图 标 "X" 可 关闭 对 话 框 


转 到 页 面 一 





图 9.4 例 9-1-2-3 的 Android 平台 小 米 手 机 浏览 器 显示 结果 ( 单 击 “ 转 到 页 面 二 ”链接 后 ) 
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913 ”jQuery Mobile 按钮 


移动 应 用 程序 应 该 触 控 便利 ,这 需要 按钮 的 支持 。jQuery Mobile 能 创建 按钮 ,有 以 
下 3 种 方法 创建 。 

@ 使 用 二 button 二 元素 。 

@ 使 用 input 二 元 素 。 

@ 使 用 data-role=="button" 的 二 a 二 元 素 。 





1. =button> 


二 button 记 元 素 的 使 用 如 例 9-1-3-1 所 示 。 
例 9-1-3-1 二 button 过 元素 使 用 的 简单 示例 。 
(1) 例 9-1-3-1. htm 源 文档 


< !DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
=.3.2.:min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 体 验 按钮 </hl>< /div> 
<div data- role= "content"><button> 按 钮 < /button>< /div> 
<div data- role= "footer"><hl> 页 脚 文本 </hl>< /div> 
</div> 
< /body> 
</htm> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 

Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9.5 所 示 。 

2. =input> 

使 用 二 input 二 元 素 的 语法 为 : 二 input type 二 "button" value 二 "按钮 " ,一 个 简单 
的 运用 如 例 9-1-3-2 所 示 。 


例 9-1-3-2 使 用 二 input 二 元素 作 为 按钮 的 简单 示例 。 
(1) 例 9-1-3-2. htm 源 文档 


< 1!DOCTYPE html> 














图 9.5 例 9-1-3-1 的 Android 平台 小 米 手 机 浏览 器 显示 结果 


<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 


-1.3.2.min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
< /script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> input 元 素 作为 按钮 的 示例 < /hl>< /div> 
<div data- role= "content"> < input type= "button" value= "按钮 ">< /div> 
<div data- role= "footer"><hl> 页 脚 文 本 < /hl>< /div> 
</div> 
< /body> 
</htm> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9.6 所 示 。 


.a> 


jQuery Mobile 中 的 按钮 会 自动 获得 样式 ,这 增强 了 它们 在 移动 设备 上 的 交互 性 和 
可 用 性 。 建 议 使 用 data-role 二 "button" 的 二 a 记 元 素来 作为 导航 按钮 ,创建 页 面 之 间 的 链 
接 , 而 二 input 记 或 二 button 记 元 素 用 于 表单 提交 。 

(1) 块 级 按钮 


超 链 接 的 块 级 按钮 语法 如 下 。 
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input 元 素 作 为 按钮 的 示例 GQ 


input 元 素 作为 按钮 的 示例 





按钮 











图 9.6 例 9-1-3-2 的 Android 平台 小 米 手机 浏览 器 显示 结果 


<a href= 嘎 " data- role="button"> 按 钮 < /a> 


超 链 接 的 使 用 如 例 9-1-3-3 所 示 。 
例 9-1-3-3” 超 链接 按钮 的 简单 示例 。 
@ 例 9-1-3-3. htm 源 文档 。 


< IDOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
=L23.2.0in.cm "> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 超 链接 作为 按钮 的 示例 < /hl>< /div> 
<div data- role="content"><a href="#" data- role= "button"> 按 钮 </a></ 
div> 
<div data- role= "footer"><hl> 页 脚 文本 < /hl>< /div> 
</div> 
< /body> 
</htm> 


@ Android 平台 小 米 手机 浏览 器 显示 结 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9.7 所 示 。 
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超 链接 作为 按钮 的 示例 CQ 





超 链接 作为 按钮 的 示例 


页 脚 文本 








图 9.7 例 9-1-3-3 的 Android 平台 小 米 手机 浏览 器 显示 结果 


(2) 行内 按钮 

默认 情况 下 ,按钮 会 占据 屏幕 的 全 部 宽度 。 如 果 需 要 按钮 适应 其 内 容 , 或 者 需要 两 
个 或 多 个 按钮 并 排 显示 ,可 添加 data-inline 二 "true" ,如 例 9-1-3-4 所 示 。 

例 9-1-3-4 行内 按钮 的 简单 示例 。 

@O 例 9-1-3-4. htm 源 文档 。 


< !DOCTYPE html> 


<html> 

<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 

</script> 
< /head> 
<body> 


<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 超 链接 导航 行内 按钮 的 示例 < /hl>< /div> 
<div data- role= "content"><p> 欢 迎 使 用 超 链接 导航 < /p> 
<a href="#pagetwo" data- role= "button" data- inline= "true"> 转 到 页 面 二 


</a> 
</div> 
<div data- role= "footer"><hl> 页 脚 文 本 </hl>< /div> 


</div> 
<div data- role= "page" id= "pagetwo"> 
<div data- role= "header"><hl> 欢 迎 来 到 我 的 主页 < /hl>< /div> 
<div data- role= "content"> 
<P> 再 见 ! < /p> 
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<a href="#pageone" data- role= "button" data- inline= "true"> 转 到 页 面 一 </ 
a 
<a href="#pageone" data- role= "button" data- inline= "true"> 转 到 页 面 一 </ 
a> 
<a href="#pageone" data- role= "button" data- inline= "true"> 转 到 页 面 一 </ 
a 

</div> 

<div data- role= "footer"><hl> 页 脚 文 本 < /hl>< /div> 

</div> 
< /body> 
</htm> 


@ Android 平台 小 米 手机 浏览 器 显示 结果 。 
单 击 “ 转 到 页 面 二 ”按钮 前 后 的 界面 如 图 9.8 和 图 9.9 所 示 。 


超 链接 导航 行内 按钮 的 示例 Q 


超 链接 导航 行内 按钮 的 示例 





欢迎 使 用 超 链接 导航 


转 到 页 面 二 





9.8 例 9-1-3-4 的 Android 平台 小 米 手机 浏览 器 显示 结果 (未 单 击 “ 转 到 页 面 二 "按钮 ) 


欢迎 来 到 我 的 主页 


欢迎 来 到 我 的 主页 





再 见 ! 


转 到 页 面 一 转 到 页 面 一 转 到 页 面 一 








图 9.9 单 击 图 9.8 的 “ 转 到 页 面 二 ”按钮 后 Android 平台 小 米 手机 浏览 器 显示 结果 
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(3) 组 合 按钮 

jQuery Mobile 提供 了 对 按钮 进行 组 合 的 简单 方法 。 将 data-role 王 "controlgroup" 
属性 与 data-type 王 "horizontal | vertical" 一 同 使 用 ,以 规定 水 平 或 垂直 地 组 合 按钮 ,如 
例 9-1-3-5 所 示 。 

例 9-1-3-5 组合 按钮 的 简单 示例 。 

@ 例 9-1-3-5. htm 源 文档 。 


< !DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js"></script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 分 组 按钮 < /hl>< /div> 
<div data- role= "content"> 
<div data- role= "controlgroup" data- type= "horizontal"> 
<P> 水 平分 组 :< /p> 
<a href="#" data- role= "button"> 按 钮 1< /a> 
<a href= 嘎 " data- role= "button"> 按 钮 2< /a> 
<a href="#" data- role= "button"> 按 钮 3< /a> 
</div><br> 
<div data- role= "controlgroup" data- type= "vertical"> 
<P> 垂 直 分 组 默认 ) :< /p> 
<a hre 仁 唱 " data- role= "button"> 按 钮 1< /a> 
<a href="#" data- role= "button"> 按 钮 2< /a> 
<a href="#" data- role= "button"> 按 钮 3< /a> 


</div> 
</div> 
<div data- role= "footer"><hl> 页 脚 文本 < /hl>< /div> 
</div> 
< /body> 


</htm> 

@ Android 平台 小 米 手 机 浏览 器 显示 结果 。 

Android 平台 小 米 手 机 浏览 器 显示 结果 如 图 9. 10 所 示 。 

@ 说 明 。 

默认 情况 下 ,组 合 按钮 是 垂直 分 组 的 ,彼此 间 没 有 外 边 距 和 空白 。 只 有 第 一 个 和 最 
后 一 个 按钮 拥有 圆 角 ,组 合 后 就 创造 出 了 漂亮 的 外 观 。 
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分 组 按钮 CQ 


分 组 按钮 
水 平分 组 : 
按钮 1 按钮 2 ”按钮 3 
垂直 分 组 (默认) : 
按钮 1 


按钮 2 
按钮 3 
页 脚 文本 


图 9.10 例 9-1-3-5 的 Android 平台 小 米 手机 浏览 器 显示 结果 








(4) 后 退 按钮 

创建 后 退 按钮 , 需 使 用 data-rel 二 "back" 属性 (会 忽略 锚 的 href 值 ) ,如 例 9-1-3-6 
所 示 。 

例 9-1-3-6 后 退 按钮 的 简单 示例 。 源 文档 如 下 。 





< !DOCTYPE html> 


<html> 

<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
=L3.2.min.ca"> 
< script src= "http://code.jquery.com/ jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 

</script> 
< /head> 
<body> 


<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 后 退 按钮 实例 </hl>< /div> 
<div data- role= "content"> 
<a href= "#pagetwo" data- role= "button"> 转 到 页 面 二 < /a> 
</div> 
<div data- role= "footer"><hl> 页 脚 文 本 < /hl>< /div> 
</div> 
<div data- role= "page" id= "pagetwo"> 
<div data- role= "header"><hl> 后 退 按钮 实例 < /hl>< /div> 
<div data- role= "content"> 
<a href= 嘎 " data- role= "button" data- rel= "backn"> 后 退 </a> 
</div> 
<div data- role= "footer"><hl> 页 脚 文本 < /hl>< /div> 
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</div> 
< /body> 
</htm> 


914 按钮 图 标 

jQuery Mobile 提供 的 一 套图 标 可 使 按钮 更 具 吸 引力 。 向 按钮 添加 图 标 ,使 用 data- 
icon 属性 ,如 下 所 示 。 

<a href="#anylink" data- role= "button" data- icon= "search"> 搜 索 < /a> 


除了 超 链接 外 ,也 可 以 在 二 button 过 或 二 input 二 元 素 中 使 用 data-icon 属性 。jQuery 
Mobile 提供 的 一 些 可 用 图 标 如 表 9. 1 所 示 。 


表 9.1 data-icon 属性 值 及 其 描述 














属 性 值 描 述 属 性 值 描 述 
data-icon= "arrow-1" 左 箭头 data-icon= "home" 首页 
data-icon= "arrow-r" 右 箭 头 datar-icon 一 "back” 返回 
data-icon= "delete" 删除 data-icon= "search" 搜索 
data-icon= "info" 信息 data-icon= "grid" 网 格 














图 标 被 放置 的 位 置 有 上 、 右 、 下 或 左 ,使 用 data-iconpos 属性 来 规定 位 置 ,如 下 所 示 。 


<a href= "#1ink" data- role= "button" data- icon= "search" data- iconpos= "top"> 上 < /a> 

<a href= "#1ink" data- role= "button" data- icon= "search" data- iconpos= "right"> 右 </a> 

<a href= "#1ink" data- role= "button" data- icon= "search" data- iconpos= "bottom"> 下 </a> 

默认 地 ,所 有 按钮 中 的 图 标 靠 左 放置 。 如 果 只 需 显 示 图 标 ,将 data-iconpos 设置 为 
"notext" ,如 下 所 示 。 


<a href= "#1ink" data- role= "button" data- icon= "search" data- iconpos= "notext"> 搜 索 </ 
a> 


915 工具 栏 
工具 栏 元 素 常 被 放置 于 页 眉 和 页 脚 中 ,以 实现 “已 访问 ”的 导航 。 
1. 标题 栏 


页 眉 通 常 包 含 页 眉 标 题 /LOGO 或 3 个 按钮 (通常 是 首页 、 选 项 或 搜索 按钮 )。 可 以 
在 页 眉 中 向 左 侧 或 /以 及 右 侧 添加 按钮 。 在 页 眉 标题 文本 的 左 侧 添加 1 个 按钮 ,在 右 侧 
添加 1 个 按钮 ,如 例 9-1-5-1 所 示 。 

例 9-1-5-1 页 眉 具 有 左右 2 个 按钮 的 标题 栏 示例 。 

(1) 相关 代码 
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<div data- role= "header"> 
<a href= 嘎 " data- role= "button"> 首 页 </a> 
<hl> 欢 迎 来 到 我 的 主页 < /hl> 
<a href= 嘎 " data- role= "button"> 搜 索 </a> 
</div> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 11 所 示 。 


欢迎 访问 我 的 主页 Q 


欢迎 访问 我 的 主页 














9.11 例 9-1-5-1 的 Android 平台 小 米 手机 浏览 器 显示 结果 


(3) 代码 解析 
下 面 的 代码 向 页 眉 标 题 的 左 侧 添加 1 个 按钮 。 


<div data- role= "header"> 
<a href= 叶 " data- role= "button"> 首 页 < /a> 
<hl> 欢 迎 来 到 我 的 主页 < /hl> 
</div> 
如 在 二 hl 二 元 素 之 后 放置 按钮 链接 , 它 不 会 显示 在 文本 右 侧 。 如 需 向 页 眉 标 题 的 右 
侧 添 加 按钮 ,需要 规定 类 名 ui-btn-right, 如 下 所 示 。 
<div data- role= "header"> 
<hl> 欢 迎 来 到 我 的 主页 < /hl> 
<a href=#" data- role= "button" class="ui-btn- right"> 搜 索 < /a> 
</div> 
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(4) 提示 
页 眉 可 包含 1 个 或 2 个 按钮 ,页 脚 没 有 限制 。 


2. 页 脚 栏 


与 页 眉 相 比 ,页 脚 更 具 伸 缩 性 ,更 实用 且 多 变 , 能 够 包含 所 需 数量 的 按钮 ,如 例 9-1-5-2 
所 示 。 

例 9-1-5-2 页 眉 具 有 左右 2 个 按钮 的 标题 栏 示 例 。 

(1) 例 9-1-5-2. htm 源 文档 


< !DOCTYPE html> 
<html> 
<head> 
<link rel= "stylesheet" href= "http://code.jquery.com/mobile/l1.3.2/jquery.mobile-— 1. 
3.2.min.css"> 
<script src= "http://code.jquery.com/jquery-1.8.3.min.js">< /script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></ 
script> 
< /head> 
<body> 
<div data- role= "page"> 
<div data- role= "header"> 
<a href="#" data- role= "button" data-icon= "home"> 首 页 < /a> 
<hl> 欢 迎 访问 我 的 主页 < /hl> 
<a href= 嘎 " data- role= "button" data- icon= "search"> 搜 索 </a> 
</div> 
<div data- role="content"><p> 仅 供 演 示 标 题 栏 和 工具 栏 , 无 内 容 。< /p></ 
div> 
<div data- role= "footer"> 
<a href=#" data- role= "button" data- icon= "plus"> 转 播 到 新 浪 微 博 


</a> 

<a hre 全 虽 " data- role= "button" data- icon="plus"> 转 播 到 腾讯 微 博 
</a> 

<a hre 伟 嘎 " data- role= "button" data- icon= "plus"> 转 播 到 QQ 空间 </ 
a> 

</div> 
</div> 
< /body> 
</htm> 


(2) Android 平台 小 米 手 机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 12 所 示 。 
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欢迎 访问 我 的 主页 GQ 





欢迎 访问 我 的 主页 


仅 供 演示 标题 栏 和 工具 栏 ， 无 内 容 。 


+ 转播 到 新 浪 微 博 。 十 转播 到 时 讯 微 博 。 十 转 所 到 Qo 空间 











9.12 例 9-1-5-2 的 Android 平台 小 米 手机 浏览 器 显示 结果 


(3) 提示 
页 脚 与 页 眉 的 样式 不 同 , 它 会 减 去 一 些 内 边 距 和 空白 ,并 且 按钮 不 会 居中 。 如 果 要 
修正 该 问题 ,可 在 页 脚 设置 类 名 ui-btn。 





<div data- role= "footer" class="ui-btn"> 
能 够 在 页 脚 中 水 平 或 垂直 组 合 按钮 进行 选择 ,选择 水 平 的 示例 如 下 所 示 。 


<div data- role= "footer" class= "ui-btn"> 
<div data- role= "controlgroup" data- type= "horizontal"> 
<a href= " 虽 " data- role="button" data- icon= "plus"> 转 播 到 新 浪 微 博 < /a> 
<a href= 嘎 " data- role="button" data- icon= "plus"> 转 播 到 腾讯 微 博 < /a> 
<a href=#" data- role= "button" data- icon="plus"> 转 播 到 oo 空间 < /a> 
</div> 
</div> 


3. 定位 页 眉 和 页 脚 





页 眉 和 页 脚 使 用 data-position 属性 来 定位 ,放置 页 眉 和 页 脚 的 方式 有 以 下 3 种 。 

OO inline: 默认 页 眉 和 页 脚 与 页 面 内 容 位 于 行内 。 

@ fixed: 页 面 和 页 脚 会 留 在 页 面 顶部 和 底部 。 

@ fullscreen: 与 fixed 类 似 , 页 面 和 页 脚 会 留 在 页 面 顶部 和 底部 ,但 浮 于 页 面 内 容 
这 下 

fullscreen 对 于 照片 .图 像 和 视频 非常 理想 。 对 于 fixed 和 fullscreen 定位 ,触摸 屏幕 
将 隐藏 和 显示 页 眉 及 页 脚 。 

(1) inline 定位 (默认 ) 








<div data- role= "header" data-position="inline"></div> 
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<div data- role= "footer" data- position="inline">< /div> 
(2) fixed 定位 


<div data- role= "header" data- position= "fixed">< /div> 
<div data- role= "footer" data- position= "fixed">< /div> 


(3) fullscreen 定位 
启用 全 面 定 位 ,使 用 data-position 二 "fixed" ,并 向 该 元 素 添加 data-fullscreen 属性 。 


<div data- role= "header" data- position= "fixed" data- fullscreen= "true"> < /div> 
<div data- role= "footer" data- position= "fixed" data- fullscreen= "true">< /div> 


916 导航 栏 


1. 导航 栏 


导航 栏 由 一 组 水 平 排列 的 链接 构成 ,通常 位 于 页 眉 或 页 脚 内 部 。 默 认 地 ,导航 栏 中 
的 链接 会 自动 转换 为 按钮 。 使 用 data-role= "navbar"” 属性 来 定义 导航 栏 ,如 例 9-1-6 
所 示 。 

例 9-1-6-1 导航 栏 使 用 的 一 个 简单 示例 。 

(1) 例 9-1-6-1. htm 源 文档 


< !DOCTYPE html> 


<html> 

<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
=1.3.2.0in.635"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 

</script> 
< /head> 
<body> 


<div data- role= "page" id= "pageone"> 
<div data- role= "header"> 
<hl> 欢 迎 来 到 我 的 主页 < /hl> 
<div data- role= "navbar"> 
<ul> 
<1i><a hre 仁 啡 " data- icon= "home"> 首 页 </a></1i> 
<Jli><ahre 会 啡 " data-icon="arrow-r"> 页 面 二 </a></1i> 
<1li><a hre 传 啡 " data- icon= "search"> 搜 索 </a></1i> 
</ul> 
</div> 
</div> 
<div data- role= "content"><p> 我 的 内 容 ..< /p>< /div> 
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<div data- role= "footer"> 
<hl> 我 的 页 脚 < /hl> 
</div> 
</div> 
< /body> 
</htm> 


(2) Android 平台 小 米 手 机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 13 所 示 。 


欢迎 来 到 我 的 主页 


欢迎 来 到 我 的 主页 


> 
页 而 二 








9.13 例 9-1-6-1 的 Android 平台 小 米 手机 浏览 器 显示 结果 


(3) 提示 
按钮 的 宽度 默认 与 其 内 容 一 致 。 使 用 无 序列 表 来 均等 地 划分 按钮 : 1 个 按钮 占据 
100% 的 宽度 ,2 个 按钮 各 50% 的 宽度 ,3 个 按钮 各 33. 3% 的 宽度 ,以 此 类 推 。 如 果 在 导 


航 栏 中 规定 了 5 个 以 上 的 按钮 , 它 会 弯 折 为 多 行 。 
2. 活动 按钮 
当 单 击 导 航 栏 中 的 链接 时 ,会 获得 选取 的 外 观 。 如 需 在 不 单 击 链 接 时 实现 此 外 观 ， 


请 使 用 class 二 "ui-btn-active": 


<1i><a href="#anylink" class="ui-btn-active"> 首 页 < /a></1i> 


3. 内 容 中 的 导航 栏 


内 容 中 的 导航 栏 如 例 9-1-6-2 所 示 。 
例 9-1-6-2 内 容 中 的 导航 栏 示例 。 
(1) 例 9-1-6-2. htm 源 文档 


< !DOCTYPE html> 
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<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 欢 迎 来 到 我 的 主页 < /hl>< /div> 
<div data- role= "content"> 
<div data- role= "navbar"> 
<ul> 
<1li><a href=#" data- icon="plus"> 更 多 </a></1li> 
<1i><a hre 伍 叶 " data-icon="minus"> 更 少 </a></1i> 
<1i><a hre 全 啡 " data-icon="delete"> 删 除 </a></1i> 
<1li><a href 伍 嘎 " data-icon="check"> 喜 爱 </a></1i> 
<1li><a hre 全 嘎 " data- icon="info"> 信 息 </a></1li> 
</ul> 
</div> 
<p> 该 例 演示 内 容 中 的 导航 栏 。< /p> 
</div> 
<div data- role="footer"><h1l> 我 的 页 脚 < /hl>< /div> 
</div> 
< /body> 
</html> 


(2) Android 平台 小 米 手机 浏览 器 显示 结 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 14 所 示 。 





欢迎 来 到 我 的 主页 





欢迎 来 到 我 的 主页 
© © © 9 0 
更 多 更 Dp WM 喜爱 信息 
该 例 演示 内 容 中 的 导航 栏 


EL 











9.14 例 9-1-6-2 的 Android 平台 小 米 手 机 浏览 器 显示 结果 
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4. 页 脚 中 的 导航 栏 


页 脚 中 的 导航 栏 如 例 9-1-6-3 所 示 。 
例 9-1-6-3 ”页 脚 中 的 导航 栏 示例 。 
(1) 例 9-1-6-3. htm 源 文档 


< !DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
= .3.2.min.css"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js"></script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 欢 迎 来 到 我 的 主页 < /hl>< /div> 
<div data- role= "content"> 
<P> 该 例 演示 页 脚 中 的 导航 栏 。< /p> 
</div> 
<div data- role= "footer"> 
<div data- role= "navbar"> 
<ul> 
<1li><a href="#" data- icon= "plus"> 更 多 < /a></l1i> 
<1i><a href=#" data- icon= "minus"> 更 少 </a></1i> 
<1i><a hre 全 啡 " data- icon="delete"> 删 除 </a></1i> 
<1i><a href=#" data- icon= "check"> 嘉 爱 </a></1i> 
<1i><a href= 哇 " data- icon= minfon> 信 息 </a></1i> 
</ul> 
</div> 
</div> 
</div> 
< /body> 
</htm> 


(2) Android 平台 小 米 手机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 15 所 示 。 


917 可 折 圭 
可 折 秋 (Collapsibles) 可 隐藏 或 显示 内 容 , 对 于 存储 部 分 信息 很 有 用 。 
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欢迎 来 到 我 的 主页 


该 例 演示 页 脚 中 的 导航 栏 。 











图 9.15 例 9-1-6-3 的 Android 平台 小 米 手机 浏览 器 显示 结果 


1. 创建 可 折 径 块 


如 需 创 建 可 折 秋 的 内 容 块 ,向 目标 容器 分 配 data-role 二 "collapsible" 属性 。 在 
中 添加 1 个 标题 元 素 , 其 后 是 需要 扩展 的 任意 HTML 标记 。 

例 9-1-7-1 一 个 可 折 又 的 网 页 示例 。 

(1) 例 9-1-7-1. htm 源 文档 








< !DOCTYPE html> 


<htm> 

<head> 
< link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
<script src= "http://code.jquery.com/ jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 

</script> 
< /head> 
<body> 


<div data- role= "page" id= "pageone"> 
<div data- role= "header"><hl> 可 折 笃 块 </hl></div> 
<div data- role= "content"> 
<div data- role= "collapsible"> 
<hl> 单 击 我 -我 可 以 折 闪 ! < /hl> 
<p> 我 是 可 折合 的 内 容 。< /p> 
</div> 
</div> 
<div data- role= "footer"><hl> 页 脚 文本 </hl>< /div> 
</div> 
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</body> 
</html> 
(2) Android 平台 小 米 手机 浏览 器 显示 结果 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 16 和 图 9. 17 所 示 。 


可 折 友 块 G 


可 折 登 块 





人 @ 点 击 我 - 我 可 以 折 驹 ! 





图 9.16 例 9-1-7-1 的 Android 平台 小 米 手机 浏览 器 显示 结果 ( 折 又 态 ) 





旭 点 击 我 -我 可 以 折 双 1 


我 是 可 折 允 的 内 容 。 








9.17 例 9-1-7-1 的 Android 平台 小 米 手机 浏览 器 显示 结果 (展开 态 ) 


单 击 图 9. 16 的 加 号 图 标 ,关闭 的 内 容 被 展开 .如 图 9.17 所 示 。 单 击 图 9. 17 的 减 号 


图 标 , 已 展开 的 内 容 被 关闭 ,如 图 9. 16 所 示 。 
(3) 提示 


默认 地 ,该 内 容 是 关闭 的 。 如 需 在 页 面 加 载 时 扩展 内 容 , 使 用 data-collapsed 一 


"false"。 
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2. 可 折 和 又 块 嵌 套 
可 以 巾 套 可 折 符 内容 块 ,折合 内 容 块 可 以 被 嵌 套 任意 次 数 ,示例 如 下 所 示 。 


<div data- role="collapsible"> 
<hl> 单 击 我 -我 可 以 折 蚕 ! < /hl> 
<p> 我 是 被 展开 的 内 容 。< /p> 
<div data- role= "collapsible"> 
<hl> 单 击 我 -我 是 嵌 套 的 可 折 释 块 ! < /hl> 
<p> 我 是 典 套 的 可 折 秋 块 中 被 展开 的 内 容 。</p> 
</div> 
</div> 


3. 可 折 松 集合 


可 折 县 集合 指 被 组 合 在 一 起 的 可 折 县 块 。 当 新 块 被 打开 时 ,所 有 其 他 块 会 关闭 。 创 
建 若干 内 容 块 ,然后 通过 data-role 二 "collapsible-set" ,用 新 容器 包装 这 个 可 折 又 块 ,如 下 
所 示 。 


<div data- role= "collapsible- set"> 
<div data- role= "collapsible"> 
<hl> 单 击 我 -我 可 以 折 蚕 ! < /hl> 
<p> 我 是 被 展开 的 内 容 。< /p> 
</div> 
<div data- role= "collapsible"> 
<hl> 单 击 我 -我 可 以 折 蚕 ! < /hl> 
<p> 我 是 被 展开 的 内 容 。< /p> 
</div> 
</div> 


918 列表 


1. 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 : 有 序列 表 ( 近 ol) 和 无 序列 表 
(<ul 盖 )。 创 建 列 表 , 向 过 ol 二 或 二 ul 二 元 素 添加 data-role 王 "listview"。 如 使 这 些 项 目 
可 单 击 , 需 在 每 个 列表 项 (二 li 请) 中 规定 链接 。 

(1) 常规 列表 视图 

例 9-1-8-1 一 个 简单 的 列表 视图 示例 。 

@ 例 9-1-8-1. htm 源 文档 。 

< 1!DOCTYPE html> 


<html> 
<head> 
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<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js"></script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "content"> 
<h2> 有 序列 表 :< /h2> 
<ol data- role= "listview"> 
<1i><a href= 哇 吃 列 表 项 </a></1i> 
<1i><a href= 叶 "> 列表 项 < /a></1i> 
<1i><a href= 叶 "> 列表 项 </a></1i> 
</ol> 
<h2> 无 序列 表 :< /h2> 
<ul data- role= "listview"> 
<1i><a href= 哇 "> 列表 项 < /a></1i> 
<1i><a href= 哇 "> 列表 项 < /a></1i> 
<1i><a href= 哇 "> 列表 项 < /a></1i> 
</ul> 
</div> 
</div> 
< /body> 
</htm> 


@ Android 平台 小 米 手 机 浏览 器 显示 结果 。 
Android 平台 小 米 手 机 浏览 器 显示 结果 如 图 9. 18 所 示 。 





《 个 192.168.31.176:8000 GQ fF 
有 序列 表 : 
1 列表 项 © 
2. 列 表 项 © 
3. 列表 项 © 
无 序列 表 : 
列表 项 © 


© 











9.18 例 9-1-8-1 的 Android 平台 小 米 手机 浏览 器 显示 结果 
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@ 提示 。 
如 需 为 列表 添加 圆 角 和 外 边 距 ,可 使 用 data-inset= "true" 属 性 ,如 下 所 示 。 


<ul data- role= "listview" data- inset= "true"> 


默认 地 ,列表 中 的 列表 项 会 自动 转换 为 按钮 (无 须 data-role 二 "button")。 

(2) 列表 分 隔 符 

列表 分 隔 符 (List Dividers) 用 于 把 项 目 组 织 和 组 合 为 分 类 / 节 。 如 规定 列表 分 隔 符 
需 向 二 1i 盖 元素 添加 data-role 二 "list-divider" 属性 ,如 例 9-1-8-2 所 示 。 

例 9-1-8-2 ”一 个 具有 分 隔 符 的 列表 视图 示例 。 

@ 例 9-1-8-2. htm 源 文 档 。 


< !DOCTYPE html> 
<htmL> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
<script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
< script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "content"> 
<h2> 列 表 分 隔 符 < /h2> 
<ul data- role= "listview"> 
<1i data- role= "list-divider"> 欧 洲 </1i> 
<1i><a href= 哇 吃 德 国 </a></1i> 
<1i><a href= 叶 "> 英国 </a></l1i> 
<1i data- role= "list-divider"> 亚 洲 </1i> 
<1i><a href= 哇 吃 中 国 </a></1i> 
<1i><a href= 哇 "> 印度 </a></li> 
<1i data- role= "list-divider"> 非 洲 </1i> 
<1i><a href= 哇 "> 埃及 </a></1li> 
<1i><a href= 哇 "> 南非 </a></1i> 
</u> 
</div> 
</div> 
< /body> 
</htm> 


@ Android 平台 小 米 手机 浏览 器 显示 结果 。 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 19 所 示 。 
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< 会 192.168.31.176:8000 Q 号 1】 三 

列表 分 隔 符 

德国 © 
英国 © 
中 国 © 
印度 © 
非洲 

埃及 © 
南非 © 











9.19 例 9-1-8-2 的 Android 平台 小 米 手 机 浏览 器 显示 结果 


@@ 提示 。 

如 果 列 表 是 字母 顺序 的 ,jQuery Mobile 自动 添加 恰当 的 分 隔 符 ,通过 在 二 ol 二 或 
二 ul 记 元 素 上 设置 data-autodividers 二 "true" 属 性 实现 。data-autodividers 二 "true" 属 性 
通过 对 列表 项 文本 的 首 字母 进行 大 写 来 创建 分 隔 符 。 

(3) 搜索 过 滤器 

如 在 列表 中 添加 搜索 框 , 需 使 用 data-filter= "true" 属 性 ,如 例 9-1-8-3 所 示 。 

例 9-1-8-3 一 个 具有 搜索 过 滤器 的 列表 视图 示例 。 

@ 例 9-1-8-3. htm 源 文档 。 


< !DOCTYPE html> 
<html> 
<head> 
< link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
< script src= "http://code.jquery.com/jquery- 1.8.3.min.js">< /script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "content"> 
<h2> 我 的 通讯 录 < /h2> 
<ul data- role="]listview" data- autodividers="true" data- inset=" 
true" data- filter="true"> 
<1i><a href="#">Adele< /a></li> 


<1li><a href="#">Agnes< /a></li> 


</ul> 
</div> 
</div> 
< /body> 
</html> 
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<1i><a href="#">Albert< /a></li> 
<li><ahref="#">Billy< /a></li> 
<1i><a href="#">Bob< /a></li> 
<li><ahref="#">Calvin< /a></1i> 
<1i><a href="#"> Cameron< /a></li> 
<1i><a href="#">Chloe< /a></1i> 
<1i><a href="#">Christina< /a></1i> 
<1i><ahref=- "#">Diana< /a></1i> 
<1li><a href="#">Gabriel< /a></li> 
<li><a href="#">Glen< /a></li> 
<1i><a href="#">Ralph< /a>< /li> 
<1li><a href="#">Valarie< /a></li> 


<ul data- role= "listview" data- filter="true">< /ul> 


@ Android 平 台 小 米 手机 浏览 器 显示 结果 。 
Android 平台 小 米 手 机 浏览 器 显示 结果 如 图 9. 20 所 示 。 


@ 提示 。 


默认 地 ,搜索 框 中 的 文本 是 Filter items…。 如 需 修改 默认 文本 ,使 用 data-filter- 


placeholder 属性 ,如 下 所 示 。 


<ul data- role= "listview" data- filter="true" data- filter-placeholder= "搜索 姓名 "> 


2. 列表 内 容 
(1) 列表 缩 略 图 


对 于 分 辩 率 大 于 16X16 的 图 像 , 在 链接 中 添加 =img 二 元 素 ,jQuery Mobile 将 自动 


把 图 像 调整 至 80 X80。 
例 9-1-8-4 一 个 简单 的 


列表 缩 略 图 示例 。 


@ 例 9-1-8-4. htm 源 文档 。 


< !DOCTYPE html> 
<html> 
<head> 


<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 


~32 Mineany 


<script src= "http://code.jquery.com/jquery-— 1.8.3.min.js">< /script> 


<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 


</script> 
< /head> 
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9.20 例 9-1-8-3 的 Android 平台 小 米 手机 浏览 器 显示 (搜索 框 未 输入 内 容 ) 结 果 


<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "content"> 
<h2> 包 含 缩 略图 和 文本 的 列表 :< /h2> 
<ul data- role= "listview" data- inset= "true"> 
和 
<ahref="#"> 

< img src="/Images/chrome .png"> 
<h2> Google Chrome< /h2> 
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<P> Google Chrome is a free，open- source web 
browser. Released in 2008.< /p> 
</a> 
</1i> 
<1i> 
<a href= "# "> 
<jmg src= "/Images/firefox.png"> 
<h2>Mozilla Firefox< /h2> 
<p> Firefox is a web browser from Mozilla. Released 
in 2004.< /p> 
</a> 
</li> 
</ul> 
</div> 
</div> 
< /body> 
</html> 


@ Android 平 台 小 米 手机 浏览 器 显示 结果 。 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 21 所 示 。 





《 个 192.168.31.176:8000 Q 日 1 


包含 缩 略 图 和 文本 的 列表 : 


Google Chrome © 
Google Chrome is a free, open-source web browser. Released in 2008. 

Mozilla Firefox © 
Fretox 1s a web browser from Mozila Released in 2004 











9.21 例 9-1-8-4 的 Android 平台 小 米 手 机 浏览 器 显示 结果 


@ 提示 。 
如 向 列表 添加 分 辩 率 为 16X16 的 图 标 , 需 向 所 img> 元 素 添 加 class 一 "ui-li-icon" 属 
性 ,如 下 所 示 。 





<1i><a href="#"><img src="us.png" alt="USR" class= "ui- 1i- icon"> USA< /a> 
</li> 


(2) 拆 分 按钮 
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如 创建 带 有 垂直 分 隔 栏 的 拆 分 列表 , 需 在 二 li 二 元 素 内 放置 两 个 链接 。jQuery 
Mobile 会 自动 为 第 2 个 链接 添加 蓝 色 箭头 图 标的 样式 ,链接 中 的 文本 (如 有 ) 将 在 用 户 划 
过 该 图 标 时 显示 ,如 例 9-1-8-5 所 示 。 

例 9-1-8-5 具有 拆 分 按钮 的 列表 

@ 例 9-1-8-5. htm 直接 相关 的 源 文档 。 

<div data- role= "content"> 

<h2> 拆 分 按钮 < /h2> 
<ul data- role= "listview" data- inset= "true"> 
<1i> 
<a href="#">< img src="/Images/chrome .png"><h2> Google Chrome< /h2> 
<p> Google Chrome is a free, open- source web browser. Released in 


2008.< /p> 
</a> 
<a href="#"> Some Text< /a> 
</li> 
<1i> 
<a href="#">< img src= "/Images/firefox.png"><h2>Mozilla Firefox< / 
h2> 
<p> Firefox is a web browser from Mozilla. Released in 2004.< /p> 
</a> 
<a href="#"> Some Text< /a> 
</1i> 
</ul> 
</div> 


@ Android 平台 小 米 手 机 浏览 器 显示 结果 。 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 22 所 示 。 


有 
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Google Chrome 

Google Chrome Is a free openrsource web browser Released In 2008. 
Mozilla Firefox 

Firefox i @ web browser from Mozila_ Released in 2004. 


了 











9.22 例 9-1-8-5 的 Android 平台 小 米 手机 浏览 器 显示 结果 
(3) 计数 泡沫 
计数 泡沫 用 于 显示 与 列表 项 相关 的 数目 。 如 添加 计数 泡沫 , 需 使 用 行内 元 素 , 比 如 
二 span ,设置 class 含有 ui-li-count 属性 并 添加 数字 ,如 例 9-1-8-6 所 示 。 
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例 9-1-8-6 分 类 显示 邮箱 邮件 数 。 
@ 例 9-1-8-6. htm 源 文档 。 


< !DOCTYPE html> 
<htm> 
<head> 
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.2/jquery.mobile 
-1.3.2.min.css"> 
< script src= "http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src= "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> 
</script> 
< /head> 
<body> 
<div data- role= "page" id= "pageone"> 
<div data- role= "content"> 
<h2> 我 的 邮箱 < /h2> 
<ul data- role= "listview" data- inset= "true"> 


<1i><a href="#"> 收 件 箱 < span class="ui- 1i- count">25</ 


span></a></1i> 

<1i><a href="#"> 发 件 箱 < span class="ui- 1i- count"> 432</ 
span></a></1i> 

<1i><a href= 哇 "> 垃圾 箱 < span class="ui- 1i- count"> 7< /span 
></a></1i> 

</ul> 
</div> 
</div> 
< /body> 
</html> 


@ Android 平台 小 米 手 机 浏览 器 显示 结果 。 
Android 平台 小 米 手机 浏览 器 显示 结果 如 图 9. 23 所 示 。 


@ 提示 。 
如 在 计数 泡 泡 中 显示 正确 的 数字 ,必须 实时 更 新 。 
919 事件 


jQuery Mobile 不 但 可 以 使 用 任何 标准 的 jQuery 事件 ,还 可 使 用 为 移动 浏览 定制 的 
事件 ,具体 如 下 。 

@ 触摸 事件 : 当 用 户 触摸 屏幕 时 触发 ( 敲 击 和 滑动 ) 。 

@ 滚动 事件 : 当 上 下 滚动 时 触发 。 

@ 方向 事件 : 当 设备 垂直 或 水 平 旋转 时 触发 。 

@ 页 面 事件 : 当 页 面 被 显示 、 隐 藏 创 建 、 加 载 以 及 /或 卸载 时 触发 。 

上 述 4 种 移动 事件 均 由 文档 on 方法 来 关联 ,由 第 一 个 实 参 表示 不 同事 件 。 
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我 的 邮箱 

收 件 箱 0 
发 件 箱 & oO 
垃圾 箱 7 











图 9.23 例 9-1-8-6 的 Android 平台 小 米 手机 浏览 器 显示 结果 


1. 初始 化 事件 


在 jQuery 中 已 学 到 使 用 文档 ready 事件 来 阻止 jQuery 代码 在 文档 结束 加 载 前 运 
行 。 然 而 ,在 jQuery Mobile 中 使 用 pageinit 事件 , 它 在 页 面 已 初始 化 并 完善 样式 设置 后 
发 生 。 例 如 : 


<script> 
$ (document) .on ("pageinit", "#pageone", function () { 
// 此 处 是 jQuery 事件 .… 
D; 
</script> 


文档 on 方法 的 第 一 个 实 参 pageinit 表示 初始 化 事件 ,第 二 个 实 参 # pageone 表示 指 
向 页 面 的 id。 
2. 触摸 事件 


触摸 事件 在 用 户 触 摸 屏幕 (页 面 ) 时 触发 ,等 同 于 PC 桌面 的 单 击 事件 。 

(1) tap 事件 

tap 事件 在 敲 击 某 个 元 素 时 触发 。 如 当 单 击 二 p> 元 素 时 ,隐藏 当前 二 p> 元 素 , 语 
名 如 下 。 


$ ("p") .on ("tap", function(){ $ (this) .hide(); }); 


(2) taphold 事件 
taphold 事件 在 敲 击 某 个 元 素 并 保持 1 秒 时 被 触发 ,如 下 所 示 。 


$ ("p") .on ("taphold", function (){ $ (this) .hige(); }); 
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(3) swip 事件 
swipe 事件 是 在 某 个 元 素 上 水 平滑 动 超过 30px 时 被 触发 ,如 下 所 示 。 


$ ("p") .on ("swipe", function(){ $ ("span") .text ("Swipe detected!"); }); 


(4) swipleft 事件 
swipeleft 事件 是 在 某 个 元 素 上 从 左 滑动 超过 30px 时 被 触发 ,如 下 所 示 。 


$ ("p") .on ("swipeleft", function() { alert ("You swiped left!"); }); 


(5) swiperight 事件 
swiperight 事件 是 在 某 个 元 素 上 从 右 滑动 超过 30px 时 被 触发 ,如 下 所 示 。 


$("p") .on ("swiperight", function() { alert ("You swiped right!"); }); 
3. 滚动 事件 


jQuery Mobile 提供 滚动 开始 和 当 滚 动 结束 2 个 滚动 事件 。 
(1) scrollstart 事件 
scrollstart 事件 在 用 户 开 始 滚动 页 面 时 被 触发 ,如 下 所 示 。 


$ (document) .on ("scrollstart", function() { alert ("开始 深 动 1"); }); 


iOS 设备 会 在 滚动 事件 发 生 时 冻结 DOM 操作 ,这 意味 着 当 用 户 深 动 时 无 法 改变 任 


何事 物 。 


(2) scrollstop 事件 
scrollstop 事件 在 用 户 停 止 滚动 页 面 时 被 触发 ,如 下 所 示 。 


$ (document) .on ("scrollstop", function () { alert ("结束 滚动 1"); }); 


4. 方向 事件 


方向 事件 在 用 户 垂直 或 水 平 旋转 移动 设备 时 被 触发 。 如 使 用 orientationchange 事 


件 , 需 把 它 添加 到 window 对 象 ,如 下 所 示 。 


$ (window) .on ("orientationchange", function(){ alert ("方向 已 改变 1"); }); 


callback 函数 可 以 设置 一 个 参数 , 即 event 对 象 , 它 会 返回 移动 设备 的 方向 , 即 


portrait( 垂 直 ) 或 landscape( 水 平 ), 如 下 所 示 。 


$ (window). on ( " orientationchange", function (event) { alert ("方向 是 : "+ event. 


orientation);}); 


由 于 orientationchange 事件 与 window 对 象 绑 定 ,可 使 用 window. orientation 属性 


来 判断 方向 ,不 同方 向 设置 不 同样 式 ,以 区 分 portrait 和 landscape 视图 ,如 下 所 示 。 


$ (window) .on ("orientationchange", function(){ 
if (window.orientation==0) //Portrait 
{ 
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$ ("p") .css ({"background- color":"yellow", "font— size":"300%"}); 
} 
else //Landscape 
{ 
$ ("Pp") .css ({"background- color": "pink", "font— size":"200%"}); 
} 
Ds; 


5. 页 面 事件 


jQuery Mobile 与 页 面 打交道 的 事件 分 如 下 4 类 。 

J@ 页 面 初始 化 : 在 页 面 创建 前 、 页 面 创建 时 以 及 页 面 初始 化 之 后 。 

@ 页 面 加 载 /卸载 : 当 外 部 页 面 加 载 时 、 印 载 时 或 遭遇 失败 时 。 

G@) 页 面 过 渡 : 在 页 面 过 渡 之 前 和 之 后 。 

@ 页 面 改变 : 当 页 面 被 更 改 或 遭遇 失败 时 。 

(1) 初始 化 事件 

jQuery Mobile 初始 化 一 张 典 型 页 面 时 ,经 历 3 个 阶段 ,分 别 是 页 面 创建 前 、 页 面 创 


建 时 和 页 面 初始 化 后 ,具体 如 下 。 


Q@ pagebeforecreate 事件 。 

当 页 面 即 将 初始 化 ,并 且 在 jQuery Mobile 已 开始 增强 页 面 之 前 ,触发 该 事件 。 

@ pagecreate 事件 。 

当 页 面 已 创建 ,但 增强 完成 之 前 ,触发 该 事件 。 

@ pageinit 事件 。 

当 页 面 已 初始 化 ,并 且 在 jQuery Mobile 已 完成 页 面 增强 之 后 ,触发 该 事件 。 

每 个 阶段 触发 的 事件 都 可 用 于 插入 或 操作 代码 。 下 面 的 例子 演示 在 jQuery Mobile 


中 创建 页 面 时 何 时 触发 每 种 事件 。 


$ (document) .on ("pagebeforecreate", function (event) { 
alert ("触发 pagebeforecreate 事件 1"); 

D; 

$ (document) .on ("pagecreate", function (event) { 
alert ("触发 pagecreate 事件 1"); 

nD; 

$ (document) .on ("pageinit", function (event) { 
alert ("触发 pageinit 事件 1") 

nD; 


(2) 加 载 事件 
页 面 加 载 事件 属于 外 部 页 面 。 外 部 页 面 载 和 人 DOM, 将 触发 两 个 事件 : pagebeforeload、 





pageload (成 功 ) 或 pageloadfailed( 失 败 ) ,具体 描述 如 下 。 


@ pagebeforeload: 在 任何 页 面 加 载 请 求 做 出 之 前 触发 。 
@ pageload: 在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 。 
@ pageloadfailed: 如 果 页 面 加 载 请 求 失败 , 则 触发 该 事件 ,默认 显示 Error Loading 


ss jQuery Mobile 
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Page 消息 。 
下 面 的 例子 演示 pageload 和 pagloadfailed 事件 的 工作 原理 。 


$ (document) .on ("pageload", function (event, data){ 
alert ("触发 pageload 事件 ! \nURL: "+data.url); 
nD; 
$ (document) .on ("pageloadfailed", function (event, data){ 
alert (" 抱 菊 ,被 请 求 页 面 不 存在 。"); 
D; 
(3) 过 渡 事件 
从 一 页 过 渡 到 下 一 页 时 产生 页 面 过 渡 事件 。 页 面 过 渡 涉 及 两 个 页 面 : 一 张 “来 "的 页 
面 和 一 张 “去 ”的 页 面 。 过 渡 使 当前 活动 页 面 到 新 页 面 的 改变 过 程 变 得 更 加 动感 。 具 体 
过 渡 事 件 及 其 描述 如 下 。 
Q pagebeforeshow: 在 “去 的 "页面 触 发 ,在 过 渡 动 画 开始 前 。 
@ pageshow: 在 "去 的 ?页 面 触发 ,在 过 滤 动画 完成 后 。 
@ pagebeforehide: 在 “来 的 ”页面 触发 ,在 过 滤 动 画 开始 前 。 
@ pagehide: 在 "来 的 "页 面 触发 ,在 过 渡 动画 完成 后 。 
下 面 的 例子 演示 了 过 滤 事件 的 工作 原理 。 


$ (document) .on ("pagebeforeshow", "#pagetwo", function (){ // 当 进入 页 面 二 时 
alert ("页 面 二 即将 显示 "); 

Ds; 

$ (document) .on ("pageshow", "#pagetwo", function () { // 当 进入 页 面 二 时 
alert ("现在 显示 页 面 二 "); 

D; 

$ (document) .on ("pagebeforehide", "#pagetwo", function () { // 当 离开 页 面 二 时 
alert ("页 面 二 即将 隐藏 "); 

nD; 

$ (document) .on ("pagehige", "#pagetwo", function (){ // 当 离开 页 面 二 时 
alert ("现在 隐藏 页 面 二 "); 

nD; 


92 上 机 实验 样 例 


本 章 所 有 上 机 实验 需要 具备 无 线 上 网 环境 ,以 使 移动 设备 能 够 访问 IIS 服务 器 发 布 
Web 站 点 。 本 章 源 代码 需要 发 布 到 一 个 Web 站 点 ,移动 设备 才能 使 用 浏览 器 访问 。 本 
章 实验 分 为 安装 IIS 发布 Web 站 点 、 设 置 防火 墙 和 访问 浏览 四 大 步骤 。 


921 安装 IS 


下 面 以 Windows 8 专业 版 为 例 讲解 安装 过 程 。 
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加 选择 控制 面板 的 “程序 ”。 
单 击 屏幕 左下 角 的 开始 菜单 按钮 ,进入 控制 面板 ,如 图 9. 24 所 示 。 在 图 9. 24 中 选 
择 “ 程 序 ”, 进 入 图 9. 25 所 示 的 界面 。 


个 里 ;控制 面板 Y | 6 搜索 控制 面板 


调整 计算 机 的 设置 查看 方式 类别” 


查看 你 的 计算 机 状态 
通过 文件 历史 记录 保存 你 的 文件 备份 副本 图 为 用 户 设置 家 隆 安全 
查找 并 解决 问题 
外 观 和 个 性 化 

网 络 和 Internet My 更 改 主题 
查看 网 络 状态 和 任务 更 改 点 面 背 最 

< 。 先 择 家 庭 组 和 共享 选项 调整 屏幕 分 六 率 
硬件 和 声音 时 钟 、 语 言 和 区 域 
查看 设备 和 打印 机 添加 语言 

0 设备 


系统 和 安全 用 户 帐户 和 家 庭 安全 
过 


更 换 办 入 法 
更 改 日 期 、 时 间或 数字 格式 


活 
程序 
轻松 使 用 
闻 VES 使 用 Windows 建 的 设 和 


优化 视觉 显示 





图 9.24 Windows 8.0 企业 版 的 控制 面板 


3 ，" 画 ， 近 制 面板 ， 程 序 Y| 6 “搜索 控制 面板 


局 程序 和 功能 
务 载 程序 | 黎 启用 或 关闭 Windows 功能 | 查看 已 安装 的 更 新 
运行 为 以 前 版 本 的 Windows 编写 的 程序 | 如 何 安装 程序 


默认 程序 


更 改 媒体 或 设备 的 默认 设置 | 始终 使 用 指定 的 程序 打开 其 种 文件 类 型 | 设置 默认 程序 





图 9.25 控制 面板 的 程序 选项 


@ 启用 Internet 信息 服务 和 Internet Information Services 可 承载 的 Web 核心 。 

在 图 9. 25 中 选择 “启用 或 关闭 Windows 功能 ", 进 入 Windows 功能 对 话 框 , 选 中 
Internet 信息 服务 和 Internet Information Services 可 承载 的 Web 核心 ,如 图 9. 26 所 示 。 

单 击 图 9. 26 中 的 “确定 ”按钮 ,系统 开始 自动 安装 IIS 的 相关 应 用 。 安 装 完毕 单 击 屏 
幕 左下 角 的 “开始 ”菜单 图 标 , 展 开 “ 所 有 程序 ”后 单 击 IIS 文件 夹 , 得 到 如 图 9. 27 所 示 的 
信息 服务 IIS 管理 器 ,表示 安装 IIS 成 功 。 


922 发 布 Web 站 点 


@ 启动 Internet 信息 服务 (IIS) 管 理 器 。 
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启用 或 关闭 Windows 功能 

















是 Active Directory 既 型 目录 服务 
Hyper-V 
出 Internet Explorer 10 




















及 Internet Information Services 可 承载 的 Web 核心 
可 具 Internet 信息 服务 

及 Microsoft Message Queue (MSMQ) 服务 器 

出 RAS 连接 管理 器 管理 工具 包 (CMANJ 

及 RIP 俩 听 器 

由 Telnet 服务 器 













































































mn 蝇 LHB 主页 
| “He pvpb-de] | 地 少时 
WE 耳 开 (6) - 吕 全 部 轩 未 (A) | 分 外 依 呈 区 直 i 
TS “局 || 昌 全 上 
外 率 向 国策 全 放 |。 ee 
HTTP 确 频 奈 MIME 关 型 处理 时 所 织 。 错 避 页 。 服务 器 下 书 。 工作 涝 租 模块 。。 其/ 六 R00 
头 时 攻取 新 的 Web 二 证 组 件 




















向 因 目 
功能 委派 ”共享 的 配置 。 瑟 于 合生 器 
功 部 视图 | 局 | 内 容 视图 
就 络 旺 ， 














图 9.27 ”Internet 信息 服务 (IIS) 管 理 


单 击 图 9. 28 的 “Internet 信息 服务 (IIS) 管 理 器 选项 , 则 启动 Internet 信息 服务 
(IIS) 管 理 器 ,进入 图 9. 27 所 示 的 对 话 框 。 

@ 添加 网 站 。 

展开 计算 机 -LHB(hb/lhb_dell) ,选中 网 站 , 右 击 ,弹出 快捷 菜单 ,如 图 9. 29 所 示 。 
选择 “添加 网 站 ?选项 ,弹出 如 图 9. 30 所 示 的 对 话 框 。 各 项 参数 如 图 9. 30 所 示 , 单 击 “ 确 
定 ” 按 钮 , 则 成 功 添加 网 站 。 

@ 查看 应 用 缓冲 池 参 数 。 

单 击 图 9. 29 所 示 的 “应 用 程序 池 ” 选 项 ,进入 图 9. 31 所 示 的 对 话 框 ,确认 jQueryMobile 
的 .NET Framework 版 本 为 v4. 0。 如 不 是 v4.0, 双 击 jQueryMobile, 可 进一步 编辑 应 用 
程序 缓冲 池 , 修 改 其 中 的 版 本 。 

@ 启动 目录 浏览 。 
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us 
国 Internet 信息 服务 (TS) 管 理 器 

有 具 Macromedia 

BD McAfee Security Scan Plus 

B Microsoft Office 

县 Microsoft Silverlight 

县 Microsoft Silverlight 3 SDK 

旧 Microsoft Silverlight 4 SDK 

B Microsoft sync Framework 

B Microsoft Visual Studio 2010 

加 Photoshop7.0 简 体 中 文 注册 版 

BD Rational Software 

DB WCF RIA Services V1.0 SP1 

B wps Office 














图 9.28 安装 IIS 后 的 开始 菜单 





GON 


文件 (F) ”视图 (V) ”帮助 (H) 

















暗 LHB 主页 


第 迁 : ” 量 开 冶 (G) - 网 全 部 显示 (A) | 分 组 依据 ;区域 3 | 
























话 加 网 站 二 , ; 
请 | 吨 各 省 
响应 标 MIME 类 型 em 错误 页 服务 器 证 书 。 工作 进程 模块 





呈 首 目 大 六 和 


目录 浏览 。 请 求 算 迁 日 志 身份 验证 。 输出 缓存 























9.29 在 快捷 菜单 中 选择 “添加 网 站 "选项 


选中 jQueryMobile 网 站 , 单 击 “ 目 录 浏 览 ” 选 项 ,如 果 管 理 网 站 的 启动 已 经 处 于 灰色 
状态 ,表示 网 站 目录 浏览 已 经 启用 。 否 则 单 击 “ 启 动 ”选项 ,如 图 9. 32 所 示 。 
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测试 设置 (G)-… 





加 地 址 四 : 
|192.168.31.176 





























示 伯 www.contoso.com 或 marketing.contoso.com 




















图 9.30 “添加 网 站 ”对 话 框 





时 说 
和 您 可 以 在 此 页 上 查看 和 管理 好 务 趾 上 的 委 月 骂 序 油 部 可， 应用 奏 序 油 与 工作 流程 准 关 联 ,包含 一 个 或 多 个 应 用 程序 ， 
国 开 旭 佐 不 本 应 用 栓 序 之 周 的 现 查 ， 


@ Defoult Web Sie| | _ Miss ”和 hIG) -地 全 疡 时 A) | 分 失信 避 不 二分 所 引 
0@ jQueryMoble FE- 4 车 NET Fra 开 多 芝 本 模式 。 标 闪 应 用 且 序 
症 DefauhAppPool Be 动 v40 雪 成 Applicatonpool--。 1 
jaueyMobile -PD vao 3 Applicatonpool -1 





























9.31 查看 jQueryMobile 应 用 缓冲 池 





@ jQueryMobile 主页 
3 乍 Fl(G - 品 全 时 趟 A) | 分 扫 体 瑟 区 芭 


5 @ Defaut web Ste P 

.jovenvobie 而 8 涪 
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图 9.32 操作 目录 浏览 选项 
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923 设置 htp 访 问 通 过 防火 墙 
@ 启动 控制 面板 ,如 图 9. 33 所 示 。 


个 加 ， 控 制 面板 Y 6 省 过 深 制 面板 


调整 计算 机 的 设置 查看 方式 关 8| ~ 


系统 和 安全 用 户 帐 户 和 家 庭 安 全 
查看 你 的 计算 机 状态 下 国 更改 帐 记 关 型 
通过 文件 历史 记录 保存 你 的 文件 备份 副本 图 为 用 户 设 轩 家庭 安 全 


ed 外 观 和 个 性 化 
更 改 主题 


网 络 和 Internet My 
查看 网 阁 状 杰 和 任务 更 改 上 面 背景 

“eH 。 选择 家 庭 组 和 共享 选项 调整 屏幕 分 产 率 
硬件 和 声音 时 钟 、 语 言 和 区 域 
查看 设备 和 打印 机 添加 语言 
添加 设备 更 闹 纺 入 法 

更 改 日 期 、 时 间或 数字 格式 


程序 
井 苇 程序 轻松 使 用 
间 全 用 Windows 建 9 时 


优化 栅 觉 显示 





9.33 控制 面板 


@ 选择 “网 络 和 Internet” 选 项 ,打开 “网 络 和 Internet” 对 话 框 ,如 图 9. 34 所 示 。 


六 ~ 个 备 控制 面板 ， 网 络 和 Internet ， 


网 络 和 共享 中 心 
上 查看 网 络 状态 和 任务 | 连接 到 网 络 | 查看 网 络 计算 机 和 设备 
% 家 庭 组 
还 择 家 庭 组 和 共享 选项 
Internet 选项 
更 改 主页 | 管理 浏览 器 加 载 项 | 出 除 浏览 的 历史 记录 和 cookie 





图 9.34 “网 络 和 Internet" 对 话 框 


@ 启动 网 络 和 共享 中 心 ,如 图 9. 35 所 示 。 

@ 选择 “Windows 防火 墙 ”选项 ,打开 “Windows 防火 墙 ” 对 话 框 ,如 图 9. 36 所 示 。 

@ 单 击 “ 允 许 应 用 或 功能 通过 Windows 防火 墙 ”", 打 开 “ 允 许 的 应 用 ”对 话 框 ,如 
图 9. 37 所 示 。 

@ 如 果 不 能 选中 “万 维 网 服务 ”的 专用 和 公用 2 个 复 选 框 ,可 单 击 “ 更 改 设置 ”按钮 ， 
而 后 选中 。 否 则 ,直接 选中 “万 维 网 服务 ”的 专用 和 公用 2 个 复 选 框 ,如 图 9. 38 所 示 。 


279 





图 辐 1 人 是 ， 按 权 网 络 和 Internet ， 网 次 和 共享 中 必 
查看 基本 网 络 信息 并 设置 连接 





图 9.35 “网 络 和 共享 中 心 ” 对 话 框 


加 了 ”个 从 ， 控 制 面板 ， 系 统 和 安全 ，Windows 防火 寺 v6 | | 要 过 控制 面板 


控制 面板 主页 
允许 应 用 或 功能 通过 Windows 
防火 培 
轿 更 sci 
图 自用 或 关闭 Windows 防 炎 寺 
网 还 本 只 什 
加 高 设置 
对 网 络 进行 疑难 解答 








使 用 Windows 防火 墙 来 帮助 保护 你 的 电脑 
Windows 防火 培 有 助 于 防止 黑帮 或 悉 意 软件 通过 Internet 或 网 络 访问 你 的 电脑 . 

图 专用 网 络 R) Bi 扶 @| 
你 知道 目 信 任 的 用 户 和 设备 所 在 的 家 庭 或 工作 网 络 





Windows 防火 墙 杖 志 : 启用 
阻止 所 有 与 未 在 允许 应 用 列表 中 的 应 用 的 连接 
灾 网 可 4 
Windows 防火 夫 阻 止 新 应 用 时 通知 我 


未 对 挂名 | 





9.36 “Windows 防火 墙 ? 对 话 框 














回 天 气 


回 万 维 网 服务 (HTTP) 


> 





日 口 口 图 因 因 因 因 因 因 加固 站 
章 口 口 四 加 加 四 四 口 口 口 口 入 


区 











昌 
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9.37 “人 允许 的 应 用 ”对 话 框 
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e 3 - "1 全 «和 全 ，Windows 防火 培 允许 的 应 用 
允许 应 用 通过 Windows 防火 墙 进行 通信 
允许 应 用 进行 通信 有 地 些 风险 ? 





< 





组 
品 
口 
口 
口 
回 
回 
回 
回 
口 
口 
口 

id 


专用 
回 
回 
回 
回 
回 
回 
回 
回 
口 
口 
口 
HRS. 


到 




















图 9.38 在 防火 墙 允许 的 应 用 列表 中 选中 万 维 网 服务 (HTTP) 的 专用 和 公用 选项 
@ 单 击 图 9. 38 所 示 的 “确定 ”按钮 ,结束 设置 。 
924 组 建 无 线 局 域 网 


在 Windows 10 操作 系统 平台 下 ,以 D-LINK 无 线路 由 器 实物 连接 配置 为 例 , 讲 述 无 
线 局 域 网 的 配置 。 首 先 将 计算 机 连接 到 无 线路 由 器 LAN 口 访问 配置 网 页 ,而 后 进行 配 
置 , 最 后 将 无 线路 由 器 连 和 人 WAN ,具体 如 下 。 


1. 计算 机 访问 无 线路 由 器 配置 网 页 


把 D-LINK 无 线路 由 器 转 过 来 ,查看 背部 的 路 由 器 IP 地 址 ,用户 名 和 密码 信息 。 根 
据 D-LINK 无 线路 由 器 的 IP 地 址 192. 168. 0. 1 ,配置 D-LINK 无 线路 由 器 的 笔记 本 电脑 
的 IP 地址 为 192. 168. 0. 2 ,使 笔记 本 电脑 能 够 访问 无 线路 由 器 内 的 配置 页 面 。 步 又 
如 下 。 

g@ 连接 笔记 本 电脑 和 无 线路 由 器 。 用 带 有 RJ45 头 (水 晶 头 ) 网 线 的 一 端 连 到 无 线路 
由 器 的 LAN (图 中 的 4 个 黑色 端口 之 一 ) , 另 一 端 连 到 笔记 本 电脑 的 网 口 ,如 图 9. 39 
所 示 。 

@ 设置 笔记 本 电脑 的 IP 地 址 。 右 击 桌面 右 下 角 任 务 栏 的 网 络 图 标 , 弹 出 如 图 9. 40 
所 示 的 快捷 菜单 。 选 择 “ 打 开 网 络 和 共享 中 心 ”选项 ,打开 如 图 9. 41 所 示 的 “网 络 和 共享 
中 心 ” 对 话 框 。 单 击 “ 以 太 网 ”选项 ,打开 如 图 9. 42 所 示 的 “以 太 网 状态 ”对话 框 。 单 击 
“属性 ”按钮 ,打开 如 图 9. 43 所 示 的 “以 太 网 属性 ”对 话 框 。 双 击 “Internet 协议 版 本 4 
(TCP/IPv4)” 选 项 ,打开 如 图 9. 44 所 示 的 “Internet 协议 版 本 4(TCP/IPv4) 属 性 ”对 话 
框 ,输入 如 图 9. 44 所 示 的 IP 地 址 和 子 网 掩 码 , 单 击 “ 确 定 ” 按 钮 。 
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图 9.39 将 D-Link 路 由 器 连接 到 配置 计算 机 


个 “至 控制 面板 ， 网 络 和 Internet ， 网 络 和 共享 中 心 搜索 控制 面板 
查看 基本 网 络 信息 并 设置 连接 
查看 活动 网 络 


网 络 4 访问 类 型 :Internet 
专用 网 络 家 庭 组 ; 准备 就 绪 ， 可 以 创建 
连接 得 以 太 网 


更 改 网 络 设置 
EE 设置 新 的 连接 或 网 络 
” 设置 宽带 、 挨 号 或 VPN 连接 ; 或 设置 路 由 器 或 接 入 点 . 
问题 疑难 解答 
诊断 并 修复 网 络 问题 ， 或 者 获得 疑难 解答 信息 . 


与 请 参阅 
Internet 选项 
Windows 防火 墙 
家庭 组 





9.41 “网 络 和 共享 中 心 " 对 话 杠 
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Internet 

无 网 络 访问 权限 
已 启用 
01:38:06 

100.0 Mbps 

















ax 一 驻 , 一 已 接收 


13,019,557 | 154,964,956 























加 禁用 (D) 诊断 (G) 





























9.42 “以 太 网 状态 "对话 框 


Ei 


连接 时 使 用 : 
贸 ”Reaktek PCle GBE 系列 控制 器 














此 连接 使 用 下 列 项 目 (O): 


回 属 Microsoft 网 络 的 文件 和 打印 机 共享 
口 二 Microsoft 网 络 适配器 多 路 传送 器 协议 
十 Microsoft LLDP 协议 驱动 程序 

回 二 链 路 层 拓扑 发 现 映射 器 1/O 驱动 程序 
二 链 路 层 拓 扑 发 现 响应 程序 

回 二 Internet 协议 版 本 6 (TCP/IPv6) 














接 的 网 络 上 的 通讯 . 





























9.43 “以 太 网 属性 ”对 话 框 


#0: jQuery Moble 283 





富 规 





如 果 网 络 支持 此 功能 ， 则 可 以 获取 自动 指派 的 IP 设置 否则 ,你 需要 从 网 
络 系统 管理 员 处 获得 适当 的 IP 设置. 


〇 自动 菊 得 IP 地址 (0) 
转 使 用 下 面 的 IP 地 址 (S): 


JP 地 址 四 : 192 .168. 0 . 2 


子 网 挤 码 (U): 255 . 255 . 255 . 0 


默认 网 关 (D): 


自动 获得 DNS 服务 器 地 址 (B) 
图 使 用 下 面 的 DNS 服务 器 地 址 (E): 
首选 DNS 服务 器 (P): 
备用 DNS 服务 器 (A): 


口 退 出 时 验证 设置 (U 

















9.44 “Internet 协议 版 本 4(CTCPVIPv4) 属 性 对话 杠 


@ 打开 一 个 浏览 器 ,在 地 址 栏 中 输入 192. 168. 0. 1 , 按 回 车 键 进入 路 由 器 配置 页 面 ， 
如 图 9. 45 所 示 。 


了 DP D-UNK SYSTEMS,INC | WIF x 





容 局 hpy/192.158.0.1/wiz_ wanphp 
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9.45 ”D-Link 登录 页 面 
2. 配置 无 线路 由 器 


在 图 9.45 中 输入 密码 , 单 击 “ 确 定 ” 按 钮 。 成 功 登 录 后 ,进入 如 图 9. 46 所 示 的 
D-Link 主 界面 。 采 用 INTERNET 连接 设置 向 导 的 方式 进行 设置 ,步骤 如 下 。 
@ 选中 顶部 主 菜单 的 “设置 ”。 


@ 选中 左 侧 菜单 的 Internet 设置 。 
@@ 单 击 图 9. 46 中 部 的 “Internet 连接 设置 向 导 ” 按 钮 ,进入 如 图 9. 47 所 示 的 对 话 框 。 
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如 果 为 首次 配置 设备 ， 建 议 您 单 击 "Internet 注 接 设 置 向 号 
改 或 配置 设备 设置 ， 则 音 击 手动 Intermet 连 接 说 置 。 


天 锚 寺 FALLCOF 电器 


并 按照 界面 说 明 操作 。 如 果 您 要 手动 修 


i 


lntemet 这 过 设 加 号 





注意 ; 在 运行 向 导 前 ， 请 确定 您 已 完全 遵循 了 产品 包装 中 附带 的 快速 安装 手册 上 的 所 有 步骤 * 








手动 INTERNET 话 接 选 项 


如 果 您 要 为 新 的 D-Lini 由 器 手动 配置 Jntermet 设 置 ， 请 点 击 以 下 按钮 
手动 ntemet 这 事 届 村 

















WwirEeLESS 
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9.46 DD-Lin 


欢迎 进行 D-LINK INTERNET 连 接 设 置 向 导 
询 9 导 将 分 步 引导 您 也 置 新 的 D-Link 洛 由 器 并 连 按 至 Internet。 
。， 步骤 1: 设置 您 的 密码 


站 S82 a 
. 配置 您 的 Inti 
法相 ee 














k 主 界面 
B1 固件 版 本 : 2.00 


天 锚 二 FALLCOR> 电 器 城 二 





UUIRELESS 


@ 单 击 图 9. 
@ 设置 好 密码 , 单 击 图 
@ 设置 好 时 区 , 单 击 图 
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9.47 “Internet 连接 设置 向 导 ” 对 话 框 





47 所 示 对 话 框 中 的 “下 一 步 ” 按 钮 ,进入 如 图 9. 48 所 示 的 对 话 框 。 
9. 48 所 示 的 “下 一 步 " 按 钮 ,进入 如 图 9. 49 所 示 的 对 话 框 。 
9. 49 所 示 的 “下 一 步 ? 按 钮 ,进入 如 图 9. 50 所 示 的 对 话 框 。 


@ 选择 静态 IP 地 址 连接 方式 , 单 击 图 9. 50 所 示 的 “下 一 步 ” 按 钮 ,进入 如 图 9. 51 所 


示 的 对 话 框 。 


@ 在 图 9.51 中 设置 好 IP 地 址 、 子 网 掩 码 、 网 关 和 DNS, 单 击 “ 下 一 步 ”按钮 ,进入 如 


图 9. 52 所 示 的 对 
与 得 到 相同 的 网 络 地 址 )。 这 号 
52, 二 者 不 同 。 当 网 段 相 同时 ,只 


址 和 子 网 掩 码 相 
网 段 为 202. 194. 


话 框 。 注 意 ,LAN 网 和 WAN 








WAN 网 的 网 段 F 


学 校 的 网 络 中 心 规划 。 








网 不 能 处 于 同一 网 段 (同一 网 段 指 IP 地 
已 LAN 网 的 网 段 为 192. 168.0, 而 WAN 
能 修改 LAN 网 的 IP 地 址 或 子 网 掩 码 。 








您 的 "admin 或 户 , 时 认 设 定 为 没有 密码 。 如 起 保护 您 新 的 F 中 名 设备 ， 请 在 下 面 设 置 并 确认 密码 : 
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9.48 “设置 账户 密码 "对话 框 


页 面 : DIR-820LW 


天 猫 于 HAURCOF 二 甩 器 城 


步骤 二 达 择 您 所 在 的 时 区 
请 达 择 您 所 在 地 区 的 时 区 。 在 为 咯 由 器 配置 基于 时 间 的 过 项 委 要 该 信息 。 


ep ho on 有 








了 el | | 志 汪 
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9.49 设置 时 区 对 话 框 


产品 页 面 : DIR-820LW 


天 猫 二 HAULCOF> 电 器 城 


配置 您 的 INTERNET 话 接 


Please select the Internet connection type below: 


口 DHCP 话 接 (动态 IP 地 址 ) 
如 果 您 的 Internet 注 接 自动 提供 一 个 JP 地址 ， 请 选择 此 连接 类 型 。 许多 线 仙 调制解调器 都 使 用 此 连接 类 型 。 


了 用 户 名 /密码 连接 (PPPoE) 
如 果 Intemet 连接 堆 要 用 户 名 和 密码 连接 ， 则 选择 此 选项 ， 杀 数 DSUi 骨 制 航 记 器 使 用 此 类 连接 。 


了 用 户 名 / 密码 连接 (PPTP) 
如 果 Intemet 连接 堆 要 用 户 名 和 密码 连接 ， 则 寺 择 此 选项 ， 杀 数 DSUi 骨 制 解 调 器 使 用 此 类 连接 。 


口 用 户 名 /密码 笑 接 (DTP) 
如 果 Intemet 连接 需要 用 户 名 和 守 码 连接 ， 风 选择 此 选项 ,多 元 DSL 调制 解 调 器 使 用 此 类 连接 。 


加 基态 Ip 地 让 连 失 
如 果 Internet 设 置 供应 商 为 您 提供 了 敌 要 手动 配置 的 IP 地 址 信息 ， 则 选择 此 选项 。 








上 沁 | [ 二 生 | [| | 二 s 
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9.50 配置 Internet 连接 对 话 框 
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硬件 版 本 : B1 ”固件 版 本 : 2.00 


天 猎 二 HAULCORF* 电 器 城 二 


设置 静态 IP 地 赴 连 接 


如 果 您 起 建立 此 话 接 ， 您 老 要 一 张 由 ISP(Internet 服 务 供应 商 ) 捍 供 的 完整 IP 信 息 列表 。 如 果 您 已 经 建立 了 静态 IP 
连接 ， 趣 人 有 相关 的 信息 ， 请 联系 您 的 ISP。 


了 地 址 : [202.194.52.161 
子 网 撞 码 : [255.255.255.0 
默认 R4 关 : [202.194.52.254 


首选 DNS 地 址 : [202.194.46.69| x 
备用 DNS 地 址 : [0.0.0.0 器 选 ) 






































上 和 步 ] [下 此 
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9.51 设置 静态 IP 地 址 连接 对 话 框 


硬件 版 本 : B1 ”固件 版 本 : 2.00 





Internet 活 接 设置 向 号 已 完成 。 单 击 活 接 按钮 来 保存 您 的 设置 。 








上 - 步 ] | 下 - 步 | [mW | [ is | 


LUUIRELESS 
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9.52 配置 完成 进行 连接 对 话 框 


























3. 连接 WAN 口 到 交换 机 


一 般 路 由 器 都 有 几 个 网 线 接口 ,分 为 两 种 颜色 ,有 一 个 口 的 颜色 和 其 他 口 的 不 同 ,这 
就 是 WAN 口 , 图 9.53 所 示 的 下 方 的 黄色 端口 为 WAN 口 ,4 个 黑色 端口 为 LAN 口 。 用 
一 根 2 米 左右 、 两 关 有 水 晶 头 的 网 线 的 一 端 连 到 无 线路 由 器 的 WAN 口 ,如 图 9.53 所 示 。 
另 一 端 插 到 能 上 网 的 端口 上 ,如 图 9. 54 所 示 。 图 9. 54 的 端口 通过 地 下 布 连 线 连 到 图 9. 55 
所 示 的 交换 机 上 。 

物理 连接 完成 后 , 单 击 图 9. 51 所 示 的 连接 按钮 , 则 连接 成 功 。 
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图 9.53 网 线 的 一 端 连 到 路 由 器 黄色 端口 





图 9.54 网 线 的 另 一 端 连 到 能 上 网 的 端口 图 9.55 网 线 另 一 端的 端口 已 连 到 交换 机 


925 手机 中 浏览 网 页 


实验 用 手机 为 小 米 手 机 ,MIUI 版 本 为 MIUI 7. 4. 13 开发 版 。 假 定 浏 览 例 9-1-2-3. 


htm ,首先 要 选择 WLAN 连接 ,而 后 设置 例 9-1-2-3. htm 
为 第 一 个 默认 文档 ,最 后 在 手机 浏览 器 中 浏览 。 


1. 选择 WLAN 连接 


在 手机 桌面 上 选择 “设置 ”, 单 击 WLAN, 进 入 
WLAN 操作 界面 。 开启 WLAN, 选 择 D-Link_ DIR- 
820LW-5GHz 连接 ,连接 密码 为 123456abc。 连 接 成 功 
后 ,WLAN 界面 如 图 9. 56 所 示 。 


2. 设置 例 9-1-2-3. htm 为 第 一 个 默认 文档 


如 果 例 9-1-2-3. htm 不 在 当前 默认 文档 中 ,可 按 如 
下 步骤 设置 。 

@ 选中 网 站 jQueryMobile。 

@ 双击 默认 文档 选项 。 

@ 在 默认 文档 空白 区 域 中 右 击 , 弹 出 快捷 菜单 ,如 
图 9.57 所 示 。 








下 于 506 


< WLAN 


开启 WLAN 


连接 的 WLAN 


保存 


选取 附近 的 WLAN 


TP-UNK_11111 


其 他 … 


WLAN 设 秆 


WLAN 助 理 


网 络 诊断 





0.36Ks © S -a WW 


D-Link_DIR-820LW_5GHz 日 会 
分 享 密码 


D-Link_DIR-820LW Pp 


WLAN 连 接 信号 区 时 ,自动 切换 到 数据 网 络 。 


Eo 





.S56 


WLAN 操作 界面 
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el3) |@, te , Rs » jQueryMobile » 
文件 日 ”视图 。 帮助 























@ We De 
全 LHB (hb\hb_dell) 使 用 此 功能 指定 当 客户 读 未 清 求 竺 定 文件 名 时 返回 的 灶 认 文件 。 按 优先 公认 设置 黑 认 文档 
盛 示 用 得 序 池 Si 四 
4 国 网 站 名 称 es = 
b@ Default Web Site| | fg-1-9-1apsx 本 地 
» @ jQueryMobie M9-1-8-6.htm 本 地 
本 地 
本 地 EE 
本 地 禁用 
二 地 i 
本 地 
本 地 OO 囊 
本地 联机 帮助 
本 地 
二 地 
本 地 
Ee ~ 






































9.57 在 jQueryMobile 网 站 的 默认 文档 中 右 击 激活 快捷 菜单 


@ 单 击 “ 添 加 ”按钮 ,弹出 “添加 默认 文档 ”对 话 框 。 
@ 在 对 话 框 中 输入 “ 例 9-1-2-3. htm”, 如 图 9. 58 所 示 。 


名 称 (N): 
例 9-1-2-3.htm| 





























9.58 ”在 “添加 默认 文档 "对话 框 中 输入 文档 名 称 


@) 单 击 “ 确 定 ” 按 钮 ,设置 成 功 后 如 图 9. 59 所 示 。 











@ WX 

使 用 此 功能 措 定 当 客户 冉 未 请 求 符 定 文件 名 时 返回 的 默认 文件 。 按 优先 级 顺序 设置 默认 文档 。 

名 称 条目 类 型 a 
[Hd9-1-2-3.htm 本 地 

例 9-1-9-1.apsx 本 地 

例 9-1-8-6.htm 本 地 

例 9-1-8-5.htm 本 地 

例 9-1-8-4.htm 本 地 

例 9-1-8-3.htm 本 地 

例 9-1-8-2.htm 本 地 

例 9-1-8-1.htm 本 地 

例 9-1-7-2.htm 本 地 

例 9-1-7-1.htm 本 地 

例 9-1-6-3.htm 本 地 

例 9-1-6-2.htm 本 地 

例 9-1-6-1.htm 本 地 加 











9.59 成功 添加 例 9-1-2-3. htm 为 默认 文档 后 的 默认 文档 列表 
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假定 浏览 例 9-1-2-3. htm ,而 且 例 9-1-2-3. htm 已 在 当前 默认 文档 中 ,但 不 是 第 一 个 
文档 , 按 如 下 步骤 设置 。 

@ 选中 网 站 jQueryMobile。 

@ 双击 默认 文档 选项 。 

@ 选中 默认 文档 例 9-1-2-3. htm, 右 击 ,弹出 快捷 菜单 ,如 
图 9. 60 所 示 。 

由 单 击 上 移 。 

@) 重复 步 又 四 和 四 ,直到 例 9-1-2-3. htm 移 至 第 一 个 。 








3. 在 手机 浏览 器 中 浏览 图 9.60 默认 文档 操作 菜单 

@ 打开 手机 ,启动 浏览 器 。 

@ 在 浏览 器 的 地 址 栏 中 输入 http://192. 168. 31. 176。 

@@ 单 击 地 址 栏 右 侧 ( 或 软 键盘 右 下 方 ) 的 “前 往 ” 按 钮 ,得 到 如 图 9. 61 所 示 的 网 页 。 

说 明 : 如 果 地 址 栏 中 未 输入 端口 ,表示 使 用 默认 端口 80。 否 则 必须 含有 端口 信息 。 如 
添加 网 站 时 设置 端口 为 8000, 则 浏览 器 地 址 栏 中 应 输入 http://192. 168. 31. 176 :8000。 


ES | 
| < 会 欢迎 访问 我 的 主页 Q E30 一 : 


欢迎 访问 我 的 主页 





93 实验 任务 


1. 实验 题目 














运用 jQueryMobile 开发 手机 版 画图 程序 。 
2. 程序 功能 
在 实验 6.5 的 基础 上 新 增 如 下 功能 。 
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(1) 在 纵向 树 形 面板 新 增 “ 速 度 ” 选 项 ,内 含 运动 频率 和 运动 步 长 2 个 方面 ,并 编程 增 
加 圆 的 静 和 动 2 个 功能 。 当 在 树 形 面板 中 选中 动 , 主 菜单 中 选中 圆 , 则 圆 从 左上 角 到 右 
下 角 , 碰 到 右 下 角 而 反 向 运动 到 左上 角 , 磁 到 左上 角 后 再 次 反 向 运动 ,周而复始 直到 静 按 
钮 被 按 下 。 

(2) 在 左 侧 树 形 面板 中 选择 全 部 用 Web 存储 记录 ,打开 网 页 后 用 Web 存储 初始 化 
当前 选项 。 


3. 实验 目的 


(1) jQueryMobile 布局 技术 。 

(2) 掌握 jQueryMobile 按钮 .图 标 、 工 具 栏 .导航 栏 列表、 事件 的 运用 方法 。 
(3) 掌握 运用 IIS 发 布 网 站 的 技术 。 

(4) 掌握 浏览 网 页 设置 Windows 防火 墙 技术 。 


4. 实验 类 型 
综合 设计 。 
5. 实验 要 求 


(1) 脚本 程序 完全 运用 jQuery 或 jQueryMobile 程序 实现 。 

(2) 运用 JSON 进行 面向 对 象 应 用 程序 开发 。 

(3) 所 有 画图 全 部 用 画布 技术 实现 。 

(4) 综合 运用 jQueryMobile 按钮 .图标 .工具 栏 .导航 栏 列表 .事件 。 


6. 实验 环境 


(1) 服务 器 端 

@ 计算 机 : PC、 内 存 8GB.、 主 频 1.8GHz 及 以 上 、 硬 盘 500GB 及 以 上 。 
@ 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
@ 开发 环境 : Visual Studio 2010。 

@ Web 服务 器 : IIS。 

@ 浏览 器 : Chrome 或 QQ 浏览 器 。 

(2) 浏览 器 端 

Q@ 手机、PAD。 

@ Chrome 或 Safari。 

(3) 网 络 环境 

无 线 上 网 。 


7. 实验 原理 


给 出 与 事件 ,列表 、 图 标 、 导 航 栏 、 工 具 栏 按钮 直接 相关 的 jQueryMobile 语句 ,并 辅 
以 必要 的 说 明 与 分 析 。 
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8. 遇 到 的 问题 及 解决 办 法 


(1) 给 出 所 遇 到 的 全 部 错误 现象 描述 。 
(2) 给 出 修正 错误 前 设 定 的 断 点 位 置 。 
(3) 给 出 修正 错误 所 监视 的 变量 。 
(4) 给 出 运行 到 断 点 处 监视 变量 值 。 
9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 


Node. js 


图 知识 目标 

。 掌握 Node. js 的 特性 和 优点 

。 掌握 Node.js 的 安装 和 运行 环境 设置 

。 掌握 Node. js 的 Web 服务 器 发 布 以 及 浏览 器 与 Node. js 的 Web 服务 器 间 的 通信 
。 掌握 Node. js 的 文件 管理 技术 

。 掌握 Node. js 的 多 事件 处 理 技术 

国 能 力 目 标 

。 能 够 根据 实际 情况 ,将 任何 浏览 器 端 脚本 和 网 页 转 成 Node.js 服务 器 脚本 运行 
。 能 够 根据 定义 恰当 的 事件 并 予以 处 理 

。 能 够 用 Node. js 服务 器 端 文件 管理 技术 进行 数据 管理 

国 素质 目标 

。 运用 Node.js 部 署 高 性 能 的 网 站 

图 教学 重点 

。 浏览 器 与 Node.js 服务 器 间 的 通信 以 及 事件 定义 及 处 理 技术 

图 教学 难点 

。 部 署 高 性 能 的 网 站 

图 建议 学 时 

。 理论 : 4 学 时 

。 实验 : 2 学 时 


101 基 锅 知 议 


10.1.1 概述 


Node.js 是 一 个 JavaScript 运行 环境 。 它 封装 了 Google V8 引擎 。V8 引擎 执行 
JavaScript 的 速度 快 ,性 能 好 。Node. js 对 一 些 特 殊 用 例 进 行 了 优化 ,提供 了 替代 的 API， 


人 = Node.s 


293 





使 得 V8 在 非 浏 览 器 环境 下 运行 得 更 好 。Node. js 基于 Chrome JavaScript 运行 时 态 , 便 
于 搭建 响应 速度 快 、 易 于 扩展 的 网 络 应 用 。Node. js 基于 非 阻 塞 I/O 模型 ,使 用 事件 驱动 
的 方式 ,运行 起 来 轻 量 和 高 效 ,非常 适合 在 分 布 式 设备 上 运行 数据 密集 型 的 实时 应 用 。 


1. 特性 


V8 引擎 本 身 使 用 了 一 些 最 新 的 编译 技术 ,使 得 用 JavaScript 这 类 脚本 语言 编写 出 来 
的 代码 运行 速度 获得 了 极 大 提升 ,又 节省 了 开发 成 本 。 对 性 能 的 苛求 是 Node 的 一 个 关 
键 因 素 。JavaScript 是 一 个 事件 驱动 语言 ,Node 利用 了 这 个 优点 ,编写 出 可 扩展 性 高 的 
服务 器 。Node 采用 了 称 为 事件 循环 (event loop) 的 架构 ,使 得 编写 可 扩展 性 高 的 服务 器 
变 得 既 容 易 又 安全 。 提 高 服务 器 性 能 的 技巧 有 多 种 多 样 。Node 选择 了 既 能 提高 性 能 又 
能 减低 开发 复杂 度 的 架构 。Node 绕 过 复杂 的 并 发 编程 ,但 仍 提供 很 好 的 性 能 。 

Node 采用 一 系列 “ 非 阻 塞 " 库 来 支持 事件 循环 的 方式 ,以 此 为 文件 系统 .数据 库 之 类 
的 资源 提供 接口 。 向 文件 系统 发 送 一 个 请 求 时 ,无 须 等 待 硬盘 ( 寻 址 并 检索 文件 ) ,硬盘 
准备 好 时 , 非 阻塞 接口 会 通知 Node。 该 模型 以 可 扩展 的 方式 简化 了 对 慢 资 源 的 访问 。 

让 JavaScript 运行 于 服务 器 端 不 是 Node 的 独特 之 处 , 却 是 其 强大 功能 之 一 。 浏 览 
器 环境 限制 了 选择 编程 语言 的 自由 。 任 何 服务 器 与 日 益 复 杂 的 浏览 器 客户 端 应 用 程序 
间 共 享 代码 的 愿望 只 能 通过 JavaScript 来 实现 。 虽 然 还 存在 其 他 一 些 支持 JavaScript 在 
服务 器 端 运行 的 平台 ,但 Node 发 展 迅 猛 , 已 成 为 广泛 使 用 的 平台 。 


2. 优点 


(1) 单线 程 

Node. js 是 单线 程 的 ,在 不 新 增 额外 线程 的 情况 下 ,可 以 对 任务 进行 并 发 处 理 。 它 
通过 事件 轮 询 (event loop) 实 现 并 发 操作 ,应 用 时 尽 可 能 避免 阻塞 操作 ,使 用 非 阻 塞 
操作 。 

(2) 模块 化 

Node.js 使 用 模块 划分 不 同 的 功能 ,以 简化 应 用 的 开发 。 模 块 有 类 似 C++ 语言 中 的 
类 库 。 每 一 个 Node. js 的 类 库 都 包含 十 分 丰富 的 各 类 函数 ,比如 http 模块 就 包含 了 和 
http 功能 相关 的 很 多 函数 ,可 以 帮助 开发 者 很 容易 地 对 比 http、tcp/udp 等 操作 ,还 可 以 
很 容易 地 创建 http 和 tcp/udp 的 服务 器 。 

在 程序 中 使 用 模块 十 分 方便 。 假 设 引 入 http 类 库 , 将 对 http 类 库 的 引用 存放 在 
http 变量 中 。 此 时 ,Node. js 会 在 应 用 中 搜索 是 否 存在 node_modules 的 目录 ,并 且 搜 索 
这 个 目录 中 是 否 存 在 http 的 模块 。 如 果 Node. js 找 不 到 这 个 目录 , 则 会 到 全 局 模块 缓存 
中 去 寻找 ,用 户 可 以 通过 相对 或 者 绝对 路 径 指定 模块 的 位 置 ,比如 : 








Var myModule= require(' ./myModule.js'); 


模块 中 包含 了 很 多 功能 代码 片段 ,模块 中 的 代码 大 部 分 都 是 私有 的 。 当 然 ,可 以 将 某 些 
方法 和 变量 暴露 到 模块 外 ,这 时 可 以 使 用 exports 对 象 实现 。 
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3. 集成 开发 环境 
具备 书写 JavaScript 功能 的 任何 IDE 或 普通 的 记事 本 。 
4. 应 用 方向 


Node.js 已 发 展 成 一 个 成 熟 的 开发 平台 ,吸引 了 许多 开发 者 。 许 多 大 型 高 流量 网 站 
都 采用 Node.js 开发 ,此 外 ,开发 人 员 还 可 以 使 用 它 来 开发 一 些 快速 移动 的 Web 框架 。 

除了 Web 应 用 外 ,Node.js 也 被 应 用 在 许多 方面 ,比如 监控 、 媒 体 流 、 远 程控 制 、 桌 面 
和 移动 应 用 等 。 








10.12 Windows 下 的 安装 


Windows 官网 提供 安装 包 和 编译 器 ,可 以 在 官网 下 载 32 位 或 64 位 安装 包 。 
本 文 在 Windows 8 专业 版 环境 下 ,以 64 位 v4. 4. 3 版 本 为 例 讲述 安装 过 程 ,其 他 版 
本 类 似 。 


1. 下 载 安装 包 


打开 浏览 器 (火狐 ) ,在 地 址 栏 中 输入 下 载 地 址 ,如 图 10. 1 所 示 , 按 下 回 车 键 确认 , 弹 
出 如 图 10. 2 所 示 的 对 话 框 。 在 图 10. 2 中 单 击 “ 浏 览 ” 按 钮 ,打开 图 10. 3 所 示 的 对 话 框 。 
在 图 10. 3 中 选择 F:\ 教 学 文档 \ 自 编 教 材 \HTML5 实用 中 网 页 设计 技术 \ 环 境 文件 , 单 
击 “ 选 择 文件 夹 ” 按 钮 ,进入 如 图 10.4 所 示 的 对 话 框 。 在 图 10. 4 中 单 击 “ 保 存 文件 ” 按 
钮 , 则 成 功 保存 文件 ,如 图 10. 5 所 示 。 











oom rinn | suuslms rom mmaaoe /Tien Xt “| 
< https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi © ||Q BE <Cr/sk> 全 | 自 呈 人 会昌 9” 和 闫 | 三 
局 六 方 站 点 图 最 尝 沪 问 加 火狐 言 方 站 点 入 新 手 上 路 辐 党 用 网 址 罗京 东 高 二 图 火狐 主页 辐 党 用 网 址 罗京 商城 口 移动 版 # 答 
sas | 
Ba EE 过 


国 百 度 口 谷歌 〇 光宇 


火狐 中 文 网 Bai 全 百度 orn YOUKU 优 酷 





firefoxchina.cn Sina.com.cn 
MU 中 文风 二 度 WR be 
aa 京东 Ctrip 
天 省 精 选 哪 . 红 ” 淘 宝 网 携程 
天 京东 商城 海 二 网 捕 可 总 行 
@ Firefox 我 好学 月 还 停 主 页 沪 直 ia 录 宇内 箱 ”党 页面 设 轩 




















10.1 在 浏览 器 中 输入 下 载 地址 
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JE 择 了 打开 : 

齐 node-v4.4.3-x64.msi 
文件 类 型 : Windows Installer Package (10.5 MB) 
来 源 : https//nodejsorg 


您 理 要 Firefox 如 何 处 理 此 文件 ? 


O 〇 打开, 通 二 O) 



































图 10.2 正在 打开 对 话 框 


图 辐 ”个 出 < HTML5 实 用 网 页 设 ， 环境 文件 
组 织 ”新 建文 件 夫 


A ”名称 
网 京 降 组 


村 计算 机 
启 Win8 (c) 
Ea WinServer2008 
加 Work (F) 
加 data (G) 
@a HD-PVU2 四 


"Ne » “ E> 
文件 夹 : 


























图 10.3 “选择 下 载 文件 夹 "对 话 杠 


和 ei 择 了 打开 : 

齐 node-v4.4.3-x64.msi 
文件 类 型 : Windows Installer Package (10.5 MB) 
来 源 : https//nodejsorg 

您 下 要 Firefox 如 何 处 理 此 文件 ? 


© 打开 , 表 4(0) 











图 保存 文件 G 易 F\ 教 学 文档 \ 自 编 教 材 \HTM 














问 以 后 自动 采用 相同 的 动作 处 理 此 关 文 件 。(A) 




















10.4 选择 文件 夹 后 的 正在 打开 对 话 杠 
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© 》) ~ 个 骨 < HT ， 环境 文 件 


六 ws 夫 六 


帮 下载 四 睫 AspNetMvCc4setup 


国 点 面 醒 NDP452-KB2901907-x86-x64 
是 最 5 访问 的 位 置 而 node-v4.4.3-x64 
罚 vs10sp1-KB983509 


I ~ < mm 








图 10.5 成 功 下 载 安 装 包 的 环境 文件 夹 


2. 运 


行 安装 包 
吕 单 击 图 


10. 5 中 的 node-v4. 4. 3-x64 安装 文件 ,得 到 图 10. 6 所 示 的 安装 对 话 框 。 


Welcome to the Node.js Setup Wizard 


Nede The Setup Wizard wil instal Node.js on your computer. 
的: 


























10.6 ”安装 对 话 框 


@ 单 击 图 10.6 中 的 next 按钮 ,得 到 图 10.7 所 示 的 接受 许可 协议 对 话 框 。 


End-User License Agreement d 





INode.js is ficensed for use as follows: 
Copyright Node.js contributors. All rights reserved. 
Permission is hereby granted, free of charge, to any person obtaining 


la copy of this software and associated documentation files (the 
"Software"), to deal in the Software without restriction, including 

lwithout limitation the rights to use, copy, modify, merge, publish, 
distribute, sublicense, and/or sell copies of the Software, and to 

permit persons to whom the Software is furnished to do so, subject  v 





Iaccept the terms in the License Agreement 




















Print 





























10.7 接受 服务 协议 对 话 框 
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@ 勾 选 图 10.7 中 的 I accept the terms in the License Agreement, 单 击 Next 按钮 ， 
打开 图 10. 8 所 示 的 接受 许可 协议 对 话 框 。 


Choose a custom location or dick Next to install. Nge 人 





Install Node js to: 


Fwooanpesnds 



































图 10.8 选择 安装 文件 夹 对 话 杠 


@ 单 击 图 10. 8 中 的 Next 按钮 ,打开 图 10. 9 所 示 的 选择 功能 模块 对 话 框 。 


Custom Setup d 
Select the way you want features to be installed. Ngc ce 





Click the icons in the tree below to change the way features wil be installed. 
EEN |Nodejs rntime Install the core Node.js runtime 
(node.exe). 


由 一 至 >j Add to PATH 


This feature requires 13MB on your 
hard drive, Ithas 2of 2 
Selected 


subfeatures .The 
subfeatures require 16KB on your 
hard drive. 











Browse,,, 














Cancel 
































10.9 ”选择 功能 模块 对 话 框 


@ 单 击 图 10.9 中 的 Next 按钮 ,打开 图 10. 10 所 示 的 准备 安装 对 话 框 。 

@@ 单 击 图 10. 10 中 的 Next 按钮 ,打开 图 10. 11 所 示 的 正在 安装 初 态 对 话 框 。 随 着 
安装 不 断 进 展 , 会 看 到 图 10. 12 所 示 的 对 话 框 。 安 装 完成 ,弹出 图 10. 13 所 示 的 安装 结 
束 对 话 框 。 

@ 单 击 图 10. 13 所 示 的 Finish 按钮 ,确认 安装 完成 。 
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nede 





Click Install to begin the instaliation. Click 6adk to review or change any of your 
instalation settings. Cick Cancel to exit the wizard. 


























Please wait while the Setup Wizard installs Node.js. 


Status: 























10.11 正在 安装 初 态 对 话 框 























图 10.12 安装 接近 结束 的 对 话 框 
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Completed the Node.js Setup Wizard 


Click the Finish button to exit the Setup Wizard. 


入 Q 
ede 


Node.js has been successfuly installed. 





图 10.13 安装 结束 对 话 框 


3. 确认 安装 成 功 


单 击 Windows 8 的 “开始 ”菜单 ,展开 “所 有 程序 ”, 拖 动 深 动 条 ,找到 “Node. js 文件 
夹 ”, 展 开 Node. js 文件 夹 ,得 到 如 图 10. 14 所 示 的 程序 界面 ,表明 安装 成 功 。 


TBM Rational 

js 

〗 Macromedia 

〗 McAfee Security Scan Plus 

4 Microsoft Office 

〗 Microsoft Silverlight 

〗 Microsoft Silverlight 3 SDK 

〗 Microsoft Silverlight 4 SDK 

〗 Microsoft sync Framework 

〗 Microsoft Visual Studio 2010 
〗 Nodejs 

国 Nodejs command prompt 
© Nodejs documentation 
© Nodejs website 

Nodejs 

于 Uninstall Nodejs 
Photoshop7.0 简 体 中 文 注册 版 
j Rational Software 

〗 WCF RIA Services V1.0 Sp1 

〗 Wps Office 

WinRAR 

Windows 系统 

Windows 轻松 使 用 

人 脸 识别 插件 

| 同方 知 网 

















10.14 成 功 安装 的 “开始 "菜单 程序 组 
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全 秒 mas 加 下 开发 安 政 放生 





4. 核准 安装 版 本 


单 击 Windows 8 的 “开始 ”菜单 ,得 到 如 图 10. 15 所 示 的 对 话 框 。 在 搜索 软件 栏目 中 














(comss 


四 Wps H5 
月 腾讯 QQ 
月 用 讯 QQ 


参 Internet Explorer 


39 ii 全 


@ Mozilla Firefox 
图 


@ 四 Microsoft Visual sudio 2010 
久 2 Paint 
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辐 McAfee Security Scan plus 


上 所 有 程序 








输入 “运行 ”, 筛 出 “运行 ”程序 ,如 图 10. 16 所 示 。 单 击 图 10. 16 所 示 的 “运行 ”程序 ,进入 
图 10. 17 所 示 的 界面 。 在 图 10. 17 中 输入 cmd, 单 击 “ 确 定 ” 按 钮 ,得 到 图 10. 18 所 示 的 
DOS 命令 提示 符 对 话 框 。 在 图 10. 18 中 进入 安装 文件 所 在 目录 ,输入 node --version 命 
邻 , 在 控制 台 命令 行 输出 v4. 4.3, 如 图 10. 19 所 示 。 

















图 10.16 筛选 出 “运行 "程序 的 程序 组 


ED] Windows 将 根据 你 所 输入 的 名 称 ,为 你 打开 相应 的 程序 
文件 夹 . 文档 或 Internet 资源 。 


打开 (0): | 国 加 





图 10.15 “开始 "菜单 图 10.17 运行 程序 界面 





10.18 DOS 命令 提示 符 对 话 框 
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材 >ca HTMLS 


cd HIMLS 


材 \HIMLS 


HTMLS: 


HTML5 实 





图 10.19 查实 的 Node.js 版 本 对 话 杠 


10.13 一 个 简单 的 Hello World 输出 示例 


在 Node 中 ,Web 应 用 是 首要 的 。Node 优化 了 服务 器 的 http 创建 。 下 面 以 一 个 运 
用 Node.js 的 在 网 页 中 显示 Hello World 的 样 例 程 序 为 例 说 明 应 用 的 步骤 。 


1. 网 络 环境 


运行 Node. js 服务 器 和 浏览 网 页 的 客户 机 属于 同一 台 机 器 ,IP 地 址 为 192. 168. 31. 176。 





Solution 源 程 序 (1 project) 





2. 启动 Node.js 的 http 服务 ”下 

4 芒 理论 
(1) 建立 脚本 文件 2 
打开 VS 2010 的 源 程序 网 站 解决 方案 ,将 和 全 013js 


例 10-1-3. js 文件 建立 在 图 10. 20 所 示 的 路 ”图 10.20 例 10-1-3.js 文 件 所 在 的 路 径 
径 下 。 
(2) 例 10-1-3.js 源 文件 内 容 


Var http= require('http'); 

server=http.createServer (function (req, res) { 
res .writeHeader (200, {"Content— Type": "text/plain"}); 
res.end ("Hello World\n"); 

D; 

server.1listen (8000); 


console.1log ("httpd start @ 8000"); 


(3) 在 Node.js 服务 中 启动 例 10-1-3.js 的 http 服务 


@ 启动 Node.js command prompt。 
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@ 单 击 “ 开 始 ”" 菜 单 , 展 开 所 有 程序 ,展开 Node. js, 如 图 10. 21 所 示 。 选 择 Node. js 
command prompt, 输 入 命令 node F:\ 教 学 文档 \ 自 编 教材 \HTML5 实用 网 页 设计 技术 \ 
源 程 序 \ 理 论 \ 第 10 章 -Node\ 例 10-1-3.js, 按 下 回 车 键 ,执行 命令 的 结果 如 图 10. 22 所 
示 。 在 图 10. 22 所 示 的 控制 台中 输出 执行 提示 httpd start @8000, 说 明 http 服务 已 经 启 
动 , 等 待 浏览 器 访问 。 


点 Nodejs 


画 Nodejs command prompt 


Nodejs documentation 
Nodejs website 
回 Nodejs 

















图 10.21 展开 Node.js 的 开始 菜单 





10.22 展开 Node.js 的 开始 菜单 


3. 浏览 器 访问 :192. 168.31. 176:8000 


打开 谷歌 浏览 器 ,在 地 址 栏 中 输入 192. 168. 31. 176 :8000 , 按 回 车 键 前 往 该 地 址 端 
口 ,在 网 页 中 输出 Hello World, 如 图 10. 23 所 示 。 


D192.168.31.176:8000 x We 


€ 户 G 检 | D192.168.31.176:8000 安 


证 百度 Hao123 网 址 导航 ”起 360 安 全 导航 分 > 2345 网 址 导航 


Hello World 





10.23 在 谷歌 浏览 器 中 访问 192. 168. 31. 176:8000 的 显示 结果 


4. 程序 解析 


Node 网 络 应 用 需要 先 通过 createServer 创建 一 个 网 络 服务 对 象 。 
传人 createServer 的 function 在 每 次 http 请 求 时 都 将 被 调用 执行 ,因此 这 个 
function 也 被 称 为 请 求 的 处 理 者 。 当 http 请 求 这 个 服务 时 . Node 调用 请 求 处 理 者 
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function 并 传人 一 些 用 于 处 理事 务 相 关 的 对 象 : request 和 response。 实 际 上 ,通过 
createServer 返回 的 Server 对 象 是 一 个 EventEmitter ,用 户 应 用 程序 需要 保存 Server 对 
象 ,并 在 之 后 对 其 添加 监听 器 。 

为 了 监听 到 服务 请 求 ,在 Server 对 象 上 需要 调用 listen 方法 。 绝 大 多 数 情况 需要 传 
给 listen 服务 监听 的 端口 号 。 


102 Web 应 用 基 锅 


1021 Web 服务 器 


1. 定义 


Web 服务 器 一 般 指 网 站 服务 器 ,是 指 驻 留 于 因特网 上 某 种 类 型 计算 机 的 程序 。Web 
服务 器 的 基本 功能 是 提供 Web 信息 浏览 服务 , 它 支持 http 协议 .HTML 文档 格式 及 
URL ,能 与 客户 端的 网 络 浏览 器 配合 。 

大 多 数 Web 服务 器 都 支持 服务 端的 脚本 语言 ,并 通过 脚本 语言 从 数据 库 获 取 数 据 ， 
将 结果 返回 给 客户 端 浏览 器 。 

目前 最 主流 的 3 个 Web 服务 器 是 Apache Nginx11S。 


2. 架构 
Web 应 用 的 典型 架构 如 图 10. 24 所 示 。 
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图 10.24 Web 应 用 的 典型 架构 


Client: 客户 端 ,一 般 指 Web 浏览 器 ,可 以 通过 HTTP 协议 向 服务 器 请 求 数据 。 

Server: Web 服务 器 ,可 以 接收 Web 浏览 器 的 请 求 ,并 向 浏览 器 发 送 响应 数据 。 

Business Layer: 业务 层 , 通 过 Web 服务 器 处 理应 用 程序 ,如 与 数据 库 交 互 、. 逻 辑 运 
算 .调用 外 部 程序 等 。 

Data Layer: 数据 层 ,一 般 由 数据 库 组 成 。 
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3. 创建 


Node. js 提供 了 http 模块 ,主要 用 于 搭建 HTTP 服务 端 和 客户 端 ,使 用 HTTP 服务 
器 或 客户 端 功能 必须 调用 http 模块 ,代码 为 


var http= require ('http'); 


例 10-2-1-1 一 个 最 基本 的 Web 服务 器 架构 应 用 示例 。 
(1) 部 署 Web 服务 器 
@ 服务 器 文件 及 路 径 。 
Web 服务 器 路 径 及 相关 文件 如 图 10. 25 所 | 3 pon 家 (Prokea 
示 , 与 本 例 相 关 的 有 例 10-2-1-1.js 文件 和 Index 





.htm 文件 。 2 ER 
@ 服务 器 文件 内 容 。 于 go 


例 10-2-1-1.js 文件 的 文件 内 容 如 下 。 


var http= require ('"http7)7 


10.25 Web 服务 器 路 径 及 相关 文件 


var fs=require('fs'); 
var url= require('url'); 
// 创 建 服务 器 
http.createServer (function (request, response) { 
// 解 析 请 求 ,包括 文件 名 
Var pathname= ur] .parse (request .url) .pathname; 
// 输 出 请 求 的 文件 名 
console.1og ("Request for "+pathname+ " received."); 
// 从 文件 系统 中 读 取 请 求 的 文件 内 容 
fs.readFile (pathname.substr (1), function (err, data) { 
if (err) { 
console.log (err); 
//HTTP 状态 码 : 404 : NOT FOUND 
//Content Type: text/plain 
response .writeHead (404, { 'Content- Type': 'text/html" }); 
} 
else { 
//HTTP 状态 码 : 200 : OK 
//Content Type: text/plain 
response .writeHead (200, { 'Content— Type': 'text/html" }); 
// 响 应 文件 内 容 
response.write (data.toString ()); 
} 
// 发 送 响 应 数据 
response.end (); 
Ds; 
}) .listen (8081); 
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// 控 制 台 会 输出 以 下 信息 
console.1o0og('Server running at http://192.168.31.176:8081/"); 
Index.htm 文 件 内 容 如 下 : 
< !DOCTYPE html> 
<html xmlns= "http://www.w3.0rg/1999/zxhtml"> 
<head> 
<title>NodeJS 部 署 Web 服务 器 演示 < /title> 
< /head> 
<body> 
Hello World! 
< /body> 
</htm> 


启动 Web 服务 器 。 
打开 Node.js 命令 提示 符 窗口 ,在 窗口 提示 符 下 分 别 输入 如 下 3 条 命令 。 


cdF:\ 教 学 文档 \ 自 编 教材 \HTML5 实用 网 页 设计 技术 \ 源 程序 \ 理 论 \ 第 10 章 -Node 
下 
node 例 10-2-1-1.js 


输入 每 条 命令 后 按 回 车 键 执行 ,得 到 图 10. 26 所 示 的 成 功 启动 Web 服务 器 状态 。 





图 10.26 成 功 启动 Web 服务 器 的 命令 提示 符 窗口 


(2) 在 浏览 器 中 访问 Index. htm 

打开 火狐 浏览 器 ,在 地 址 栏 中 输入 http://192. 168. 31. 176:8081/index. htm, 按 回 
车 键 加 载 该 网 页 ,浏览 器 显示 如 图 10. 27 所 示 。 而 服务 器 端的 Node. js 命令 行 提示 窗 
输出 信息 如 图 10. 28 所 示 。 














NodeJsS 部 署 Web 服 务 器 演示 X 


所 ) 四 192.168.31.176:8081/ind ”国足 G | BE <Ct/zk> 个 | 自 晤 


加 火 颈 官方 站 点 图 最 党 访问 加 火狐 官方 站 点 世 新 手 上 路 器 党 用 网 址 图 京东 商城 。 » 口 移动 版 书签 


Hello World! 





10.27 在 浏览 器 中 访问 Web 服务 器 的 Index. htm 显示 结果 
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图 10.28 在 浏览 器 中 访问 Web 服务 器 的 Index. htm 服务 器 端 命令 提示 符 窗口 显示 结果 


1022 GETPOST 请 求 


在 很 多 场景 中 ,Web 服务 器 需要 跟 用 户 的 浏览 器 打交道 ,如 表单 提交 。 表 单 提交 到 
服务 器 ,一 般 都 使 用 GET/POST 请 求 。 下 面 介 绍 Node.js 的 GET/POST 请 求 。 


1. 解析 并 响应 GET 请 求 





由 于 GET 请 求 直 接 被 嵌入 在 路 径 中 ,URL 是 完整 的 请 求 路 径 , 包 括 了 “?” 后 面 的 部 
分 ,因此 程序 可 以 手动 解析 后 面 的 内 容 , 作 为 GET 请 求 的 参数 。Node. js 中 URL 模块 中 
的 parse 函数 提供 了 这 个 功能 。 

值得 注意 的 是 , 想 要 Node. js 正常 显示 中 文 ,需要 以 下 两 点 。 

@ 将 js 文件 保存 为 Unicode 格式 。 判 别 js 文件 为 Unicode 格式 的 一 个 简单 方法 是 
使 用 记事 本 来 判断 。 使 用 记事 本 打开 JS 文件 , 单 击 菜单 中 的 “另存 为 ,看 编码 格式 是 否 
为 UTF-8。 若 不 是 ,可 使 用 UltraEdit 工具 进行 转换 ,使 用 记事 本 也 可 以 转换 。 

@ 在 js 文件 中 增加 编码 说 明 Meta 数据 ,让 浏览 器 知道 使 用 什么 编码 来 解释 网 页 。 

例 10-2-2-1 一 个 简单 GET 请 求解 析 及 处 理 中 文 的 示例 。 

(1) 服务 器 端 源 程序 文件 : 例 10-2-2-1. js 文件 


var http= require ('"http7)7 

var Url= require ('url'); 

Var util= require (util'); 

http.createServer (function (req, res) { 
res.writeHead (200, { 'Content- Type': 'text/html' }); 
res.write('<head><meta charset= "utf- 8"/>< /head> '); 
// 解 析 url 参数 
Var params=Ur1.parse (req.url, true) .query; 
res.write ("你 的 名 字 : "+params .name); 
res.write("\n"); 
res.write ("你 的 年 龄 : "+params .age); 
res.end (); 


}) .listen (3000); 





(2) 发 布 Web 应 用 
发 布 Web 应 用 服务 器 的 命令 如 图 10. 29 所 示 。 





图 10.29 发 布 Web 应 用 Node.js 的 命令 提示 符 DOS 命令 
(3) 浏览 器 通过 GET 请 求 访 问 
浏览 器 以 GET 方式 发 起 请 求 及 处 理 结 果 如 图 10. 30 所 示 。 


DD 192.168.31.176:3000/us, x 


€ SC | D192.168.31.176:3000/user?name=Ihb&age=49 空 


让 百度 Hao123 网 址 导航 ”起 360 安 全 导航 “人 2345 网 址 导航 ”人 1024 导 航 肝 淘 宇 特 赤 门 聚 划算 
你 的 名 字 ，1hb 你 的 年 龄 ，49 





10.30 浏览 器 前 往 地 址 栏 中 的 URL 执行 结果 


2. 解析 并 响应 POST 请 求 


POST 请 求 的 内 容 全 部 都 在 对 应 的 Form 表单 中 ,http. ServerRequest 并 没有 一 个 属 
性 内 容 为 请 求 体 ,原因 是 等 待 请 求 体 传输 可 能 是 一 件 耗 时 的 工作 。 

比如 上 传 文件 ,很 多 时 候 程序 可 能 并 不 需要 理会 请 求 体 的 内 容 , 恶 意 的 POST 请 求 
会 大 大 消耗 服务 器 的 资源 ,所 有 Node. js 默认 不 会 解析 请 求 体 ,需要 时 ,编程 实现 解析 请 
求 体 。POST 请 求解 析 及 处 理 的 基本 语法 结构 如 下 。 


var http= require('http'); 
Var querystring= require('querystring'); 
http.createServer (function (req, res){ 
// 定 义 了 一 个 post 变量 ,用 于 和 暂 存 请 求 体 的 信息 
Var post= ' 7 
// 通 过 req 的 data 事 件 监听 函数 ,每 当 接 受到 请 求 体 的 数据 ,就 累加 到 post 变量 中 
req.on('data', function (chunk) { 





post+=chunk; 
D; 
// 在 end 事件 触发 后 ,通过 querystring.parse 解 析 POST 请求 ,然后 向 客户 端 返回 。 
req.on('end', function(){ 

post= querystring .parse (post); 
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res.end (util.inspect (post)); 
Ds; 
1) .listen (3000); 


例 10-2-2-2 一 个 简单 POST 请 求解 析 及 处 理 中 文 的 示例 。 
(1) 服务 器 端 源 程序 文件 : 例 10-2-2-2. js 文件 


var http= require ('"http7)7 
var querystring= require('querystring'); 
Var postHTIMI= 
'<html><head><meta charset= "utf- 8"><title> 服 务 器 解析 与 处 理 PosT 请 求 示 例 
</title>< /head> '+ 
'<body> '+ 
"< form method= "post"> "+ 
' 姓 名 : <input name= "name"><br> '+ 
' 年 龄 : <input name= "age"><br> '+ 
"< input type= "submit"> '+ 
"< /form> '+ 
'< /pody>< /html> '; 
http.createServer (function (req, res) { 
Var body=""; 
req.on('data', function (chunk) { 
body+ = chunk; 
D; 
req.on('end', function () { 
// 解 析 参 数 
body= querystring.parse (body) 
// 设 置 响应 头 部 信息 及 编码 
res.writeHead (200, { 'Content- Type': 'text/html; charset=utf8' }) 7 


if (body.name && body.age) { // 输 出 提交 的 数据 
res.write(" 姓 名 : "+body.name); 
res.write ("<br> "); 
res.write ("年 龄 : "+body.age); 

} else { // 输 出 表单 
res.write (postHTML); 

} 

res.end(); 

Ds; 
1) .listen (8000); 


(2) 发 布 Web 应 用 
发 布 Web 应 用 服务 器 的 命令 如 图 10. 31 所 示 。 





HTML: 





图 10.31 发 布 Web 应 用 Node.js 的 命令 提示 符 DOS 命令 


(3) 浏览 器 通过 POST 请 求 访 问 

用 户 浏览 器 向 192. 168. 31. 176:8000 发 起 请 求 的 执行 结果 如 图 10. 32 所 示 。 在 
图 10. 32 中 输入 图 10. 33 所 示 的 信息 , 单 击 “ 提 交 ” 按 钮 ,服务 器 响应 页 面 如 图 10. 34 
所 示 。 


癌 服务 器 解析 与 处 理 POST 二 x 全 
所 会 CG 省 | 口 192168.31.176:8000 容 
朋 百度 Hao123 网 址 导航” 必 360 安 全 导航 个 2345 网 址 导航 
姓名 ， 
年 龄 ， 
提交 





图 10.32 浏览 器 前 往 地 址 栏 中 的 URL 执行 结果 


六 服务 器 解析 与 处 理 POST 请 x 
€ GD 192.168.31.176:8000 


部 百度 Hao123 网 址 导航 太 360 安 全 导航 | 人 2345 网 址 导航 


一 360 安 全 导航 
姓名 [至 洪 玻 https://hao.360.cn/?src=lImals=n35478 


年 龄 ， 
提交 








10.33 输入 姓名 和 年 龄 的 网 页 状态 


DD 192.168.31.1 x 
二 GQ 人 丁 | 四 192.168.31.176:8000 安 
让 百度 Hao123 网 址 导航 ”起 360 安 全 导航 人 2345 网 址 导航 





姓名 : 李 洪 波 
年 龄 : 49 





10.34 单 击 “ 提 交 ” 按 钮 后 服务 器 的 响应 页 面 


| 
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103 文件 系统 





Node. js 提供 一 组 类 似 UNIX (POSIX) 标 准 的 文件 操作 API。Node 导入 文件 系统 
模块 (fs) 的 语法 如 下 所 示 。 


Var fs=require ("fs") 


1031 同步 和 异步 


Node. js 文件 系统 模块 中 方法 的 所 有 版 本 均 支 持 异步 和 同步 ,例如 读 取 文件 内 容 的 
函数 有 异步 的 fs. readFile() 和 同步 的 fs. readFileSync()。 


1. 异步 


异步 方法 比 同步 方法 性 能 更 高 ,速度 更 快 ,而 且 没 有 阻 寨 。 异步 的 方法 函数 最 后 一 
个 参数 为 回调 函数 ,回调 函数 的 第 一 个 参数 包含 了 错误 信息 (Cerror) 。 

例 10-3-1-1 一 个 简单 异步 的 读 取 文件 示例 

(1) 创建 例 10-3-1-1. txt 文件 

文件 内 容 : 明月 几时 有 ,把 酒 问 苍 天 。 

(2) 创建 例 10-3-1-1.js 文件 

源 程序 如 下 。 

Var fs=require ("fs"); 

// 异 步 读 取 

console.109g ("启动 读 取 文 件 "); 

fs.readFile(' 例 10-3-1-1.txt', function (err, data) { 

if (err) return console.error (err); 


console.1og (" 





console.10g ("异步 读 
console.10g(™ 
D; 
console.1og ("程序 执行 完毕 "); 


(3) 执行 结 
执行 结果 如 图 10. 15 所 示 。 





10.35 异步 读 取 文件 命令 提示 符 界面 
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2. 同步 


同步 读 取 没 有 回调 函数 ,输入 欲 读 取 的 文件 名 ,所 读 内 容 作 为 返回 值 传 给 调用 者 。 


例 10-3-1-2 一 个 简单 同步 的 读 取 文件 示例 。 
(1) 创建 文件 10-3-1-2. js 

源 程序 如 下 。 

Var fs=require ("fs")7 

// 同 步 读 取 

console.10g ("启动 读 取 文件 "); 

var data=fs.readFileSync('" 例 10- 3-1-1.txt'); 


Console.1og (" 





console.1log ("同步 读 取 : "+data.tostring()); 





console.10g ("一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 中 
console.10g ("程序 执行 完毕 。"); 

(2) 执行 结果 

执行 结果 如 图 10. 36 所 示 。 





图 10.36 同步 读 取 文件 命令 提示 符 界 面 


接 下 来 具体 了 解 Node. js 文件 系统 的 方法 。 


1032 文件 操纵 


1. 打开 文件 

(1) 异步 模式 下 打开 文件 的 语法 

fs.open (path, flags[, mode], callback) 

(2) 参数 使 用 说 明 

path: 文件 的 路 径 。 

flags: 文件 打开 的 行为 。 具 体 值 详 见 表 10. 1。 

mode: 设置 文件 模式 (权限 ) ,文件 创建 默认 权限 为 0666( 可 读 , 可 写 ) 。 
callback: 回调 函数 , 带 有 两 个 参数 ,如 callback(err, fd) 。 
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表 10.1 flags 参数 值 












































Flag 描 述 
r 以 读 取 模 式 打 开 文件 。 如 果 文 件 不 存在 , 则 抛 出 异常 
r 十 以 读 写 模式 打开 文件 。 如 果 文 件 不 存在 , 则 抛 出 异常 
rs 以 同步 的 方式 读 取 文件 
rs 十 以 同步 的 方式 读 取 和 写 入 文件 
w 以 写 入 模式 打开 文件 ,如 果 文 件 不 存在 , 则 创建 
wx 类 似 'w', 如 果 文 件 路 径 存在 , 则 文件 写 入 失败 
w 十 以 读 写 模式 打开 文件 ,如 果 文 件 不 存在 , 则 创建 
wx 十 类 似 'w 十 ,如 果 文 件 路 径 存在 , 则 文件 读 写 失败 
a 以 追加 模式 打开 文件 ,如 果 文 件 不 存在 , 则 创建 
ax 类 似 &@, 如 果 文件 路 径 存 在 , 则 文件 追加 失败 
a 十 以 读 取 追加 模式 打开 文件 ,如 果 文 件 不 存在 , 则 创建 
ax 十 类 似 a 十 ,如 果 文 件 路 径 存在 , 则 文件 读 取 追 加 失败 
(3) 示例 
源 程序 如 下 所 示 。 


var fs=require ("fs"); 

// 异 步 打开 文件 

console.10g ("准备 打开 文件 1"); 

fs.open('input.txt', 'r+', function(err, fd) { 
if (err) return console.error (err); 
console.log ("文件 打开 成 功 1"); 

D; 


2. 获取 文件 信息 
(1) 异步 模式 获取 文件 信息 的 语法 
fs.stat (path, callback) 


(2) 参数 使 用 说 明 

path: 文件 路 径 。 

callback: 回调 函数 , 带 有 两 个 参数 ,如 : (err,stats) ,stats 是 fs. stats 对 象 。 

执行 fs. stat(path) 后 ,会 将 stats 类 的 实例 返回 给 其 回调 函数 ,可 以 通过 stats 类 中 
的 提供 方法 判断 文件 的 相关 属性 。 例 如 ,判断 是 否 为 文件 的 语句 如 下 。 


Var fs=require('fs'); 

fs.stat ('/Users/liuht/code/itbilu/demo/fs.js', function (err, stats) { 
console.1og (stats.isFile()); //true 

]) 
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除 判断 文件 之 外 , 回 传 的 stats 对 象 还 有 其 他 方法 ,如 表 10. 2 所 示 。 
表 10.2 stats 类 中 的 方法 











2 大 描 述 
stats. isFile() 如 果 是 文件 , 则 返回 true, 和 否则 返回 false 
stats. isDirectory() 如 果 是 目录 , 则 返回 true, 和 否则 返回 false 
stats. isBlockDevice() 如 果 是 块 设备 , 则 返回 true, 和 否则 返回 false 





stats. isCharacterDevice() | 如 果 是 字符 设备 , 则 返回 true, 否 则 返回 false 
stats. isSymbolicLink() 如 果 是 软 链接 , 则 返回 true, 和 否则 返回 false 
如 果 是 FIFO, 则 返回 true, 和 否则 返回 false。FIFO 是 UNIX 中 一 种 特殊 








stats. isFIFO() 








类 型 的 命令 管道 
stats. isSocket() 如 果 是 Socket, 则 返回 true, 和 否则 返回 false 
(3) 示例 
源 程序 如 下 所 示 。 


var fs=require ("fs"); 
console.1og ("准备 打开 文件 1"); 
fs.stat ('input.txt', function (err, stats) { 
if (err) return console.error (err); 
console.log (stats); 
console.1og (" 读 取 文 件 信息 成 功 1"); 
// 检 测 文 件 类 型 
console.1og ("是 否 为 文件 (isFile) ? "+stats.isFile()); 
console.1og ("是 否 为 目录 (isDirectory) ? "+ stats.isDirectory ()); 
D; 


3. 写 入 /创建 文件 
(1) 异步 模式 下 写 入 文件 的 语法 


fs.writeFile(file，data[，options]，callback) 


如 果 文 件 存在 ,该 方法 写 人 的 内 容 会 覆盖 旧 的 文件 内 容 。 和 否则 创建 文件 。 

(2) 参数 使 用 说 明 

file: 文件 名 或 文件 描述 符 。 

data: 要 写 人 文件 的 数据 ,可 以 是 String( 字 符 串 ) 或 Buffer( 流 ) 对 象 。 

options: 该 参数 是 一 个 对 象 ,包含 {encoding, mode, flag}。 默 认 编 码 为 UTF8, 模 
式 为 0666 ,flag 为 "w'。 

callback: 回调 函数 ,回调 函数 只 包含 错误 信息 参数 (err) , 写 入 失败 时 返回 。 

(3) 示例 

源 程 序 如 下 所 示 。 
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Var fs=require ("fs"); 
console.1og ("准备 写 人 文件 "); 
fs.writeFile('input.txt'，' 我 是 通过 写 和 的 文件 内 容 ! '， function(err) { 
if (err) return console .error (err) 7 
console.1og (" 数 据 写 人 成 功 !m) :7 
console.log("-------- 我 是 分 割 线 ------------- wy 
console.1og (" 读 取 写 入 的 数据 1"); 
fs.readFile('input .txt', function (err, data) { 
if (err) return console.error (err); 
console.10g ("异步 读 取 文 件数 据 : "+qata.tostring()); 


Ds; 
4. 读 取 文 件 
(1) 异步 模式 下 读 取 文 件 的 语法 格式 


fs.read(fd, buffer, offset, length, position, callback) 


该 方法 使 用 了 文件 描述 符 来 读 取 文 件 。 

(2) 参数 使 用 说 明 

fd: 通过 fs. open() 方法 返回 的 文件 描述 符 。 

buffer: 数据 写 和 人 的 缓冲 区 。 

offset: 缓冲 区 写 人 的 写 人 偏 移 量 。 

length: 要 从 文件 中 读 取 的 字 节 数 。 

position: 文件 读 取 的 起 始 位 置 ,如 果 position 的 值 为 null, 则 会 从 当前 文件 指针 的 


位 置 读 取 。 


callback: 回调 函数 .有 3 个 参数 err、bytesRead 和 buffer,err 为 错误 信息 ,bytesRead 


表示 读 取 的 字 节 数 ,buffer 为 缓冲 区 对 象 。 


5. 关闭 文件 
(1) 异步 模式 下 关闭 文件 的 语法 


fs .close (fd，callback) 


该 方法 使 用 了 文件 描述 符 来 读 取 文件 。 

(2) 参数 使 用 说 明 

fd: 通过 fs. open() 方法 返回 的 文件 描述 符 。 
callback: 回调 函数 ,没有 参数 。 


6. 截取 文件 
(1) 异步 模式 下 截取 文件 的 语法 


fs .ftruncate (fd, len, callback) 
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该 方法 使 用 了 文件 描述 符 来 读 取 文件 。 

(2) 参数 使 用 说 明 

fd: 通过 fs. open() 方法 返回 的 文件 描述 符 。 
len: 文件 内 容 截取 的 长 度 。 

callback: 回调 函数 ,没有 参数 。 





7. 删除 文件 

(1) 语法 格式 

fs.unlink (path, callback) 
(2) 参数 使 用 说 明 


path: 文件 路 径 。 
callback: 回调 函数 ,没有 参数 。 


1033 目录 操纵 


1. 创建 目录 
(1) 语法 格式 
fs.mkdir (path[, mode], callback) 
(2) 参数 使 用 说 明 
path: 文件 路 径 。 
mode: 设置 目录 权限 ,默认 为 0777。 
callback: 回调 函数 ,没有 参数 。 
(3) 示例 
var fs=require ("fs"); 
console.10g ("创建 目录 /tmp/test/"); 
fs.mkdir ("/tmp/test/", function (err) { 

if (err) { 

return console.error (err); 

} 

console.1og ("目录 创建 成 功 。"); 
D; 


2. 读 取 目 录 
(1) 语法 格式 


fs.readdir (path, callback) 
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(2) 参数 使 用 说 明 

path: 文件 路 径 。 

callback: 回调 函数 ,回调 函数 带 有 两 个 参数 err \files,err 为 错误 信息 ,files 为 目录 

下 的 文件 数组 列表 。 

(3) 示例 

Var fs=require("fs")7 

console.log (" 查 看 /tmp 目录 "); 

fs.readdir ("/tmp/", function (err, files){ 
if (err) return console.error (err); 
files.forEach( function (file){ 

console.log( file ); 

Ds; 

Ds; 


3. 删除 目录 
(1) 删除 目录 的 语法 


fs.rmdir (path, callback) 


(2) 参数 使 用 说 明 

path: 文件 路 径 。 

callback: 回调 函数 ,没有 参数 。 
(3) 示例 


var fs=require ("fs"); 
// 执 行 前 创建 一 个 空 的 /tmp/test 目录 
console.10g ("准备 删除 目录 /tmp/test"); 
fs.rmdir("/tmp/test", function (err) { 
if (err) return console .error (err); 
console.10g (" 读 取 /tmp 目录 "); 
fs.readdir ("/tmp/", function (err, files){ 
if (err) return console.error (err); 
files.forEach( function (file){ 
console.log( file ); 


104 事 件 


1041 回调 函数 
Node. js 异步 编程 的 直接 体现 就 是 回调 。 异 步 编程 依托 于 回调 实现 ,但 不 能 说 使 用 


了 回调 后 程序 就 异步 化 了 。 回 调 函 数 在 完成 任务 后 就 会 被 调用 ,Node 使 用 了 大 量 的 回 
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调 函 数 ,Node 所 有 API 都 支持 回调 函数 。 


在 例 10-3-1-1 中 ,一 边 读 取 文 件 ,一 边 执行 其 他 命令 。 文 件 读 取 完 成 后 ,将 文件 内 容 


作为 回调 函数 的 参数 返回 。 这 样 ,执行 代码 时 就 没有 阻塞 或 等 待 文件 IO 操作。 这 就 极 
大 地 提高 了 Node.js 的 性 能 ,可 以 处 理 大 量 的 并 发 请 求 。 


例 10-3-1-1 和 例 10-3-1-2 两 个 实例 讲述 了 阻塞 与 非 阻 塞 调 用 的 不 同 。 第 二 个 实例 


在 文件 读 取 完 后 才 执行 完 程序 。 第 一 个 实例 不 需要 等 待 文件 读 取 完 ,在 读 取 文 件 时 就 可 
以 同时 执行 接 下 来 的 代码 , 极 大 地 提高 了 程序 的 性 能 。 


因此 ,阻塞 是 按 顺序 执行 的 ,而 非 阻塞 是 不 需要 按 顺 序 的 。 所 以 ,如 果 需 要 处 理 回调 


函数 的 参数 ,就 需要 写 在 回调 函数 内 。 


1042 事件 循环 


高 。 


Node. js 是 单 进程 单线 程 应 用 程序 ,但 是 通过 事件 和 回调 支持 并 发 ,所 以 性 能 非常 
Node.js 的 每 一 个 API 都 是 异步 的 ,并 作为 一 个 独立 线程 运行 ,使 用 异步 函数 调用 ， 


并 处 理 并 发 。Node. js 所 有 的 事件 机 制 基本 上 都 是 用 设计 模式 中 观察 者 模式 实现 。 


Node. js 单线 程 类 似 进 入 一 个 while(true) 的 事件 循环 ,直到 没有 事件 观察 者 退出 。 


每 个 异步 事件 都 生成 一 个 事件 观察 者 ,如 果 有 事件 发 生 , 就 调用 该 回调 函数 。 


Node. js 使 用 事件 驱动 模型 ,如 图 10. 37 所 示 。 当 Web Server 接收 到 请 求 , 就 关闭 


它 , 然 后 进行 处 理 , 最 后 去 服务 下 一 个 Web 请 求 。 这 个 请 求 完 成 后 ,被 放 回 处 理 队 列 , 当 
到 达 队 列 开头 ,这 个 结果 被 返回 给 用 户 。 


Event Handlers 


和 


四 10.37 ”事件 驱动 模型 


这 个 模型 非常 高 效 ,可 扩展 性 非常 强 ,因为 Web Server 一 直接 受 请 求 而 不 等 待 任何 


读 写 操作 (这 也 被 称 为 非 阻塞 式 1/O 或 者 事件 驱动 1/O)。 


当 于 一 





事件 驱动 模型 中 会 生成 一 个 主 循 环 来 监听 事件 .检测 到 事件 时 触发 回调 函数 。 

整个 事件 驱动 的 流程 就 是 这 么 实现 的 ,非常 简洁 。 有 点 类 似 于 观察 者 模式 ,事件 相 
个 主题 ,而 所 有 注册 到 这 个 事件 上 的 处 理 函数 相当 于 观察 者 。 

Node.js 有 多 个 内 置 的 事件 ,可 以 通过 引入 events 模块 ,并 通过 实例 化 EventEmitter 


类 来 绑 定 和 监听 事件 ,如 例 10-4-2-1 所 示 。 


例 10-4-2-1 事件 绑 定 处 理 示 例 。 
(1) 创建 10-4-2-1.js 文件 
文件 内 容 如 下 。 
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var events= requjire ('events'); // 引 入 events 模块 
var eventEmitter=new events .EventEmitter (); // 创 建 eventEmitter 对 象 
// 创 建 事 件 处 理 程序 
Var connectHandler= function connected() { 

console.10g(' 连 接 成 功 。'); 

eventEmitter.emit ('data received'); // 触 发 data_received 事 件 
} 
eventEmitter.on ("connection'，connectHandler); // 绑 定 connection 事 件 处 理 程 序 
// 使 用 匿名 也 数 绑 定 data_received 事 件 
eventEmitter.on('data received', function(){ 

console.10g ("数据 接收 成 功 。'); 
D; 
eventEmitter .emit ('connection'); // 触 发 connection 事件 
console.10g ("程序 执行 完毕 。"); 


(2) 执行 结果 
执行 结果 如 图 10. 38 所 示 。 
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图 10.38 例 10-4-2-1.js 的 运行 结果 


1043 EventEmitter 


Node.js 所 有 的 异步 1/O 操作 完成 时 都 会 发 送 一 个 事件 到 事件 队列 。Node. js 里 面 
的 许多 对 象 都 会 分 发 事件 : 一 个 net. Server 对 象 会 在 每 次 有 新 连接 时 分 发 一 个 事件 ,一 
个 fs. readStream 对 象 会 在 文件 被 打开 时 发 出 一 个 事件 。 所 有 这 些 产 生 事件 的 对 象 都 是 
events. EventEmitter 的 实例 。 

events 模块 只 提供 了 一 个 对 象 : events. EventEmitter。EventEmitter 的 核心 就 是 事 
件 触发 与 事件 监听 器 功能 的 封装 。 

通过 require("events") ;来 访问 events 模块 ,进而 实例 化 EventEmitter, 如 下 所 示 。 


// 引 入 events 模块 
Var events= require ('events'); 
// 创 建 eventEmitter 对 象 


Var eventEmitter=new events.EventEmitter (); 
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如 果 EventEmitter 对 象 在 实例 化 时 发 生 错 误 ,会 触发 error 事件 。 当 添加 新 的 监听 
器 时 ,newListener 事件 会 触发 , 当 监 听 器 被 移 除 时 .removeListener 事件 被 触发 。 

例 10-4-3-1 一 个 简单 的 EventEmitter 的 运用 。 

(1) 例 10-4-3-1.js 的 内 容 














Var EventEmitter= require ('events') .EventEmitter; 
var event=new EventEmitter (); 
event .on('some event', function () { console.10g('some event 已 处 理 ');}); 


setTimeout (function () { event.emit ('some event');}, 1000); 


(2) 例 10-4-3-1.js 的 执行 结果 。 
执行 结果 如 图 10. 39 所 示 。 
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图 10.39 例 10-4-3-1.js 的 运行 结果 


(3) 例 10-4-3-1.js 的 程序 分 析 
运行 这 段 代码 ,1 秒 后 控制 台 输 出 了 ”some_event 已 处 理 *。 其 原理 是 event 对 象 注 
了 事件 some_event 的 一 个 监听 器 ,然后 通过 setTimeout, 在 1000ms 后 向 event 对 象 
发 送 事件 some_event ,此 时 会 调用 some_event 的 监听 器 。 


1. 事件 参数 


EventEmitter 的 每 个 事件 由 一 个 事件 名 和 若干 个 参数 组 成 ,事件 名 是 一 个 字符 串 ， 
通常 表达 一 定 的 语义 。 对 于 每 个 事件 ,EventEmitter 支持 若干 个 事件 监听 器 。 当 事件 触 
发 时 ,注册 到 这 个 事件 的 事件 监听 器 被 依次 调用 ,事件 参数 作为 回调 函数 参数 传递 

例 10-4-3-1-1 事件 参数 示例 。 

(1) 建立 例 10-4-3-1-1.js 文件 

文件 内 容 如 下 。 





Var events= require ('events'); 

var emitter=new events.EventEmitter (); 

emitter.on('someEvent', function(argl, arg2) { console.1og( SPE argl, arg2); }); 
emitter.on('someEvent', function(argl, arg2) { console.log('listener2', argl, arg2); }); 
emitter.emit ('someEvent'，'argl 参数 '，'arg2 参数 '); 


(2) 执行 例 10-4-3-1-1. js 
执行 结果 如 图 10. 40 所 示 。 
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图 10.40” 例 10-4-3-1-1.js 的 运行 结果 


(3) 例 10-4-3-1-1.js 的 程序 分 析 

以 上 例子 中 , emitter 为 事件 someEvent 注册 了 两 个 事件 监听 器 ,然后 触发 了 
someEvent 事件 。 从 运行 结果 中 可 以 看 到 两 个 事件 监听 器 回调 函数 被 先后 调用 。 这 就 
是 EventEmitter 最 简单 的 用 法 。 

2. EventEmitter 对 象 方法 

EventEmitter 提供 了 多 个 方法 ,如 on 和 emit。on 函数 用 于 绑 定 事件 函数 ,emit 属 
性 用 于 触发 一 个 事件 。 常 用 的 方法 如 表 10. 3 所 示 。 

表 10.3 EventEmitter 对 象 方法 








序号 方 法 描 述 
1 |addListener(event,listener) 为 指定 事件 添加 一 个 监听 器 到 监听 器 数组 的 尾部 
创建 监听 器 ,并 将 event 事件 和 响应 函数 response 相关 联 。 
2 |on(event,response) event 为 一 个 字符 串 ,表示 事件 名 字 。response 为 一 个 响应 
函数 





创建 单 次 监听 器 ,并 将 event 事件 和 响应 函数 response 相关 
联 。event 为 一 个 字符 串 ,表示 事件 名 字 。response 为 一 个 
响应 函数 。 监 听 器 最 多 只 会 触发 一 次 ,触发 后 立刻 解除 该 
监听 器 


oo 


once(event,response) 








移 除 指 定 事件 的 某 个 监听 器 ,监听 器 必须 是 该 事 
4 removeListener(event,response) | 册 过 的 监听 器 。 它 接受 两 个 参数 ,第 一 个 是 
个 是 回调 函数 名 称 














移 除 所 有 事件 的 所 有 监听 器 , 如 果 指 定 事件 , 则 移 除 指定 事 











5 |removeAllListeners([event]) 件 的 所 有 监听 器 
默认 情况 下 ,如 果 添 加 的 监听 器 超过 10 个 EventEmitters 
6 |setMaxListeners(n) 就 会 输出 警 息 。setMaxListeners 函数 用 于 提高 监听 器 
的 默认 限制 的 数量 
7 |listeners(event) 返回 指定 事件 的 监听 器 数组 





按 参 数 的 顺序 执行 每 个 监听 器 ,如 果 事 件 有 注册 监听 ,返回 


mitCevent | a "Larg2] ,| ... |]) i 
een [rel ltg fie 
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3. 实例 演示 


(1) 创建 例 10-4-3-1-3.js 文件 
文件 内 容 如 下 。 


Var events= require ('events'); 

var eventEmitter= new events .EventEmitter (); 

// 监 听 器 #1 

var listenerl= function listenerl() { console.1og(' 监 听 器 listenerl 执行 。'); } 
// 监 听 器 #2 

var listener2= function listener2() { console.1og(' 监 听 器 listener2 执行 。'); } 
// 绑 定 connection 事件 ,处理 函 数 为 listenerl 

eventEmjitter.addListener ('connection', listenerl); 

// 绑 定 connection 事件 ,处 理 函 数 为 listener2 

eventEmitter.on('connection', listener2); 

var eventListeners = require (' events ' ) EventEmitter. listenerCount (eventEmitter, ' 
connection'); 






console.10g (eventListenerst+ "个 监听 器 监听 连接 事件 ,"); 
// 处 理 connection 事件 

eventEmitter .emit ('connection'); 

// 移 除 监 绑 定 的 listenerl 函数 
eventEmitter.removeListener ('connection', listenerl); 





console.10g ("listenerl 不 再 
// 触 发 连接 事件 
evVentEmitter.emit ('connection'); 

eventListeners= require ('events ') .EventEmitter. listenerCount (eventEmitter, ' connection 
二 

console.1og (eventListeners+" 个 监听 器 监听 连接 事件 .m); 

console.1og ("程序 执行 完毕 。"); 


(2) 执行 结果 
执行 结果 如 图 10. 41 所 示 。 





listenerl 


listener 





10.41 ” 例 10-4-3-1-3.js 的 运行 结果 
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105 实验 任务 


1. 实验 题目 
基于 Node.js 和 jQueryMobile 开发 手机 版 画图 程序 。 
2. 程序 功能 


浏览 器 端 页 面 功能 与 9. 3 的 程序 功能 相同 。 利 用 Node. js 的 文件 记录 用 户 选择 的 背 
景色 、 线 宽 和 运动 速度 。 下 次 登录 时 自动 启用 用 户 的 最 近 一 次 设置 参数 。 


3. 实验 目的 


(1) 掌握 Node.js 的 Web 服务 器 发 布 技术 。 
(2) 掌握 Node. js 的 文件 管理 技术 。 
(3) 掌握 Node. js 的 事件 定义 及 处 理 技 术 。 


4. 实验 类 型 
综合 设计 。 
5. 实验 要 求 


(1) 新 登录 用 户 ,创建 参数 文件 。 每 个 用 户 一 个 参数 文件 。 
(2) 服务 器 端的 命令 提示 符 界 面 报告 用 户 登 录 和 更 改 设置 情况 。 


6. 实验 环境 


(1) 服务 器 端 

Q@ 计算 机 : PC、 内 存 8GB、 主 频 1.8GHz 及 以 上 硬盘 500GB 及 以 上 。 
@ 操作 系统 : Windows XP、Windows 7、Windows 8、Windows 10。 
@ 开发 环境 : Visual Studio 2010。 

@ Web 服务 器 : IIS。 

@ 浏览 器 : Chrome 或 QQ 浏览 器 。 

(2) 浏览 器 端 

@ 手机 .PAD。 

@ Chrome 或 Safari。 

(3) 网 络 环境 

无 线 上 网 。 


7. 实验 原理 
绘 出 浏览 器 与 Node. js 服务 器 的 同步 关系 图 。 
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8. 遇 到 的 问题 及 解决 办 法 
9. 运行 结果 


给 出 所 完成 任务 功能 的 屏幕 截图 。 
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